D3.js grouped bar chart

Question

I am making a bar chart using D3.js like this
_{(source: statcan.gc.ca)}

but it is supposed to be vertical. so I can show comparison through two sets of data. I use the tutorial from http://bost.ocks.org/mike/bar/2/, 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 http://jsfiddle.net/x8rax/

<meta charset="utf-8">
<style>

.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;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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.
</script>

<svg class = "chart2"></svg>
<script>
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);

</script>

Answer 1

Edit: Got it. You left out the names of the second set of variables in 3 places:

1.

var chart2 = d3.select(".chart") (should be chart2)

2.

.attr("height", barHeight * data.length); (should be data2)

3.

var bar2 = chart.selectAll("g") (should be chart2)

Will leave what I did with the placing below. Note the position:absolute on chart to make chart2 overlap with it.

Your code has a couple problems, I just copied the part that works and made the changes to the data. I'll try to find all the issues in your code and edit my answer.

For now, here's a working solution. I think what causes problem is some naming confusion so I just overwrite the same variables for both charts. Once svg elements have been appended you don't really need to keep the variables around.

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);

var data = [10, 10, 10, 10, 10, 10];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .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 + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

http://jsfiddle.net/x8rax/6/