title: D3 Comparison bar chart
body: <pre><code>var data = [
      {"Month":"2013/12","Name":"John","EC":344},
      {"Month":"2013/12","Name":"Smith","EC":249},
      {"Month":"2013/12","Name":"Mary","EC":161},    
      {"Month":"2013/11","Name":"John","EC":128},
      {"Month":"2013/11","Name":"Smith","EC":125},  
      {"Month":"2013/11","Name":"Mary","EC":117}
  ];
  </code></pre>
  
  <p>I have json data for 3 people John, Smith &amp; Mary for the month of 2013/11 and 2013/12. I want to draw d3 bar chart to compare the data of each person for the month 2013/11 and 2013/12 by representing each person with different bar color for both months. The same set of  colors will be used for each person for both months.</p>
  
  <p>How do I group by Name and draw bars for their count (EC) for both the month(11 &amp;12) of the same person. I only get one bar but the other bar does not come up for each person. My code is in jsfiddle <a href="http://jsfiddle.net/4gY8H/" rel="nofollow">http://jsfiddle.net/4gY8H/</a>. Can you please help me figure out what I am missing?</p>
  
  <pre><code>var data=[{"Name":"Katte","Month":"2013/11","ExamCount":"30"},{"Name":"Borsh","Month":"2013/11","ExamCount":"130"},{"Name":"Broer","Month":"2013/11","ExamCount":"320"},{"Name":"John","Month":"2013/11","ExamCount":"60"},
  {"Name":"Katte","Month":"2013/12","ExamCount":"130"},{"Name":"Borsh","Month":"2013/12","ExamCount":"1130"},{"Name":"Broer","Month":"2013/12","ExamCount":"3120"},{"Name":"John","Month":"2013/12","ExamCount":"610"}];
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var x0 = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var x1 = d3.scale.ordinal();
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var color = d3.scale.ordinal()
      .range(["rgba(11,94,215,.8)", "rgba(245, 143, 8, 0.8)", "rgba(0, 167, 188, 0.8)", "rgba(223, 40, 35, 0.8)", "rgba(153, 44, 150, 0.8)", "rgba(124, 189, 42, 0.8)", "rgba(37, 47, 71, 0.8)","rgba(153, 0, 51, 0.8)", "rgba(153, 51, 51, 0.8)", "rgba(92, 0, 92, 0.8)"]);
  
  var xAxis = d3.svg.axis()
      .scale(x0)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(d3.format(".2s"));
  
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
    var months = d3.keys(data[0]).filter(function(key) { return key !== "Name"; });
  console.log(months);
    data.forEach(function(d) {
      d.month = months.map(function(name) { return {name: name, value: +d[name]}; });
    });
  
    x0.domain(data.map(function(d) { return d.Name; }));
    x1.domain(months).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.month, function(d) { return d.value; }); })]);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Exam Count");
  
    var person = svg.selectAll(".person")
        .data(data)
      .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x0(d.Name) + ",0)"; });
  
    person.selectAll("rect")
        .data(function(d) { return d.month; })
      .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("x", function(d) { return x1(d.name); })
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); })
        .style("fill", function(d) { return color(d.name); });
  
    var legend = svg.selectAll(".legend")
        .data(months.slice().reverse())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  
    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);
  
    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });
  &lt;/script&gt;
  </code></pre>