title: How to make multiple pie charts using D3 and a JS dictionary?
body: <p>I am trying to adapt the code from Mike Bostock's <a href="https://gist.github.com/mbostock/1305111" rel="nofollow">example</a> of making multiple pie charts. It's extremely concise, but I am struggling to understand one basic piece of the code:</p>
  
  <pre><code>// Define the data as a two-dimensional array of numbers. If you had other
  // data to associate with each number, replace each number with an object, e.g.,
  // `{key: "value"}`.
  var data = [
    [11975,  5871, 8916, 2868],
    [ 1951, 10048, 2060, 6171],
    [ 8010, 16145, 8090, 8045],
    [ 1013,   990,  940, 6907]
  ];
  </code></pre>
  
  <p>What is an example of <code>{key: "value"}</code> that makes this work? I've tried </p>
  
  <p><code>[{key1: 100}, {key2: 200}]</code></p>
  
  <p><code>[{key1: 100, key2: 200}]</code></p>
  
  <p><code>[{'key1': 100, 'key2': 200}]</code> 
  and a few other permutations.</p>
  
  <p>My goal is to use a <code>json</code> object instead of a data structure like this, but I want to better understand how to construct the correct data structure.</p>
  
  <p>To generate the chart (via the gist) the following code is used:</p>
  
  <pre><code>var m = 10,
      r = 100,
      z = d3.scale.category20c();
  
  var svg = d3.select(".sentiment-pie-chart-1").selectAll("svg")
      .data(data)
    .enter().append("svg:svg")
      .attr("width", (r + m) * 2)
      .attr("height", (r + m) * 2)
    .append("svg:g")
      .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
  
  svg.selectAll("path")
      .data(d3.layout.pie())
    .enter().append("svg:path")
      .attr("d", d3.svg.arc()
      .innerRadius(r / 2)
      .outerRadius(r))
      .style("fill", function(d, i) { return z(i); });
  </code></pre>