title: X,Y domain data-binding in multiple grouped bar charts in d3.js
body: <p><a href="http://jsfiddle.net/tsr0y093/" rel="nofollow">Fiddle Example</a></p>
  
  <p>I have been following these two examples (<a href="http://bl.ocks.org/officeofjane/7315455" rel="nofollow">1</a>)(<a href="http://bl.ocks.org/mbostock/3887051" rel="nofollow">2</a>) to create small multiple grouped bar charts on the same page. Here's a JSON data example:</p>
  
  <pre><code>var data = [
  {"name":"AA","sales_price":20,"retail_price":25},
  {"name":"BB","sales_price":30,"retail_price":45},
  {"name":"CC","sales_price":10,"retail_price":55},
  {"name":"DD","sales_price":10,"retail_price":25},
  {"name":"EE","sales_price":13,"retail_price":20},
  {"name":"GG","sales_price":13,"retail_price":15},
  ];
  </code></pre>
  
  <p>I've managed to get the bar values to show up correctly in each chart, but the X domain and Y domain values aren't right. I couldn't figure out how to bind each data row's <code>sales_price</code> and <code>retail_price</code> to the axises instead of the entire JSON data. I guess there's a problem with this block of code:</p>
  
  <pre><code> data.forEach(function(d) {
      d.compare = field_name.map(function(name) {       
         return {name: name, value: +d[name]}; 
      });
   });
  
   x0.domain(data.map(function(d) { console.log(d); return d.name; }));
   x1.domain(field_name).rangeRoundBands([0, x0.rangeBand()]);
   y.domain([0, d3.max(data, function(d) { 
         return d3.max(d.compare, function(d) {         
         return d.value; }); 
   })]);
  </code></pre>
  
  <p>How can I make the domains return each row's values for each grouped bar charts?</p>
  
  <p>Full Code:</p>
  
  <pre><code>function multi_bars(el){
   var margin = {top: 45, right:20, bottom: 20, left: 50},
       width = 350 - margin.left - margin.right,
       height = 250 - margin.top - margin.bottom;
   var x0 = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
   var x1 = d3.scale.ordinal();
   var color = d3.scale.ordinal()
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
   var y = d3.scale.linear()
      .range([height, 0]);
   var xAxis = d3.svg.axis()
      .scale(x0)
      .orient("bottom");
   var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
   var field_name = ['retail_price','sales_price'];
   data.forEach(function(d) {
      d.compare = field_name.map(function(name) {       
         return {name: name, value: +d[name]}; 
      });
   });
  
   x0.domain(data.map(function(d) { console.log(d); return d.name; }));
   x1.domain(field_name).rangeRoundBands([0, x0.rangeBand()]);
   y.domain([0, d3.max(data, function(d) { 
         return d3.max(d.compare, function(d) {         
         return d.value; }); 
   })]);
  
   var svg = d3.select(el).selectAll("svg")
      .data(data)
      .enter().append("svg:svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
      .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
   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("Price");
  
  
    // Accessing nested data: https://groups.google.com/forum/#!topic/d3-js/kummm9mS4EA
    // data(function(d) {return d.values;}) 
    // this will dereference the values for nested data for each group
    svg.selectAll(".bar")
      .data(function(d) {return d.compare;})
      .enter()
      .append("rect")
       .attr("class", "bar")
       .attr("x", function(d) { return x1(d.name); })
       .attr("width", x1.rangeBand())
       .attr("y", function(d) { return y(d.value); })
       .attr("height", function(d) { return height - y(d.value); })
       .attr("fill", color)
  
    var legend = svg.selectAll(".legend")
        .data(field_name.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; });
  
   function type(d) {
    d.percent = +d.percent;
    return d;
   }
  
  }
  
  multi_bars(".container");
  </code></pre>