title: D3.js grouped bar chart
body: <p>I am making a bar chart using D3.js like this<a href="https://i.stack.imgur.com/pig0g.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pig0g.gif" alt="bar chart"></a><br>
  <sub>(source: <a href="http://www.statcan.gc.ca/pub/12-593-x/2007001/figures/figure2.gif" rel="nofollow noreferrer">statcan.gc.ca</a>)</sub>  </p>
  
  <p>but it is supposed to be vertical. so I can show comparison through two sets of data.
  I use the tutorial from <a href="http://bost.ocks.org/mike/bar/2/" rel="nofollow noreferrer">http://bost.ocks.org/mike/bar/2/</a>, to make the comparison,I build two classes, “chart” and “chart1” and give them data separately, but it only shows the first svg charts. What is the problem?
  Here is the code
  <a href="http://jsfiddle.net/x8rax/" rel="nofollow noreferrer">http://jsfiddle.net/x8rax/</a></p>
  
  <pre><code>&lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  .chart rect {
    fill: rgb(203, 232, 118);
  }
  
  .chart2 rect {
    fill: rgb(50, 50, 50);
  }
  
  .chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
  }
  
  &lt;/style&gt;
  &lt;svg class="chart"&gt;&lt;/svg&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var data = [4, 8, 15, 16, 23, 42];
  
  
  var width = 420,
      barHeight = 80;
  
  var x = d3.scale.linear()
      .domain([0, d3.max(data)])
      .range([0, width]);
  
  
  var chart = d3.select(".chart")
      .attr("width", width)
      .attr("height", barHeight * data.length);
  
  
  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });
  
  bar.append("rect")
      .attr("width", x)
      .attr("height", barHeight - 60);
  
  
  bar.append("text")
      .attr("x", function(d) { return x(d) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d; });
  
  
  //data is not so much interesting here.
  &lt;/script&gt;
  
  &lt;svg class = "chart2"&gt;&lt;/svg&gt;
  &lt;script&gt;
  var data2 = [10, 10, 10, 10, 10, 10];
  
  var width = 420,
      barHeight = 80;
  
  var x2 = d3.scale.linear()
      .domain([0, d3.max(data2)])
      .range([0, width]);
  
  var chart2 = d3.select(".chart")
      .attr("width", width)
      .attr("height", barHeight * data.length);
  
  var bar2 = chart.selectAll("g")
      .data(data2)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });
  
  bar2.append("rect")
      .attr("width", x2)
      .attr("height", barHeight - 60);
  
  &lt;/script&gt;
  </code></pre>