title: drawing d3.svg.arc element using data stored in array in d3.js
body: <p>Hi i'm trying to multiple draw <a href="http://en.wikipedia.org/wiki/File%3aNightingale-mortality.jpg" rel="nofollow">coxcomb charts</a>. 
  The code draws one such chart. <a href="http://jsfiddle.net/etheleon/Zawx4/" rel="nofollow">jsfiddle example</a></p>
  
  <p>The problem i ran into: how do I order my data such that it'll allow me to draw multiples of such charts?</p>
  
  <pre><code>//data
  var data = [
      {"label": "January", "value": 150, "time": 1},
      {"label": "February", "value": 65, "time": 2},
      {"label": "March", "value": 50, "time": 3},
      {"label": "April", "value": 75, "time": 4},
      {"label": "May", "value": 150, "time": 5},
      {"label": "June", "value": 65, "time": 6}
  ];
  
  //container
  var svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 1000)
  .attr("height", 1000);
  
  var pi = Math.PI;
  
  var arc = d3.svg.arc()
          .innerRadius(0)
          .outerRadius(function(d,i) {return (0 + d.value); })
          .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
          .endAngle(function(d) { return (d.time * 60 * pi / 180 ); });
  
  var chartContainer = svg.append("g")
          .attr('class', 'some_class')
          .attr("transform", "translate(450, 300)");
  
  chartContainer.selectAll("path")
          .data(data)
          .enter()
          .append("path")
          .attr("d", arc)
          .attr("class", "arc");
  </code></pre>
  
  <p>I thought perhaps I can order the data in the following manner: </p>
  
  <pre><code>var data2 = [
  {label: "Rose.chart1", value: [150,65,50,75,150,65]}
  {label: "Rose.chart2", value: [130,50,30,10,50,70]}
  ]
  </code></pre>
  
  <p>But that would mean i'll have to rewrite the following:</p>
  
  <p>1.) defining the arc variable</p>
  
  <pre><code>var arc = d3.svg.arc()
          .innerRadius(0)
          .outerRadius(function(d,i) {return (0 + d.value); })
          .startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
          .endAngle(function(d) { return (d.time * 60 * pi / 180 ); });
  </code></pre>
  
  <p>2.) binding the data to the selection</p>
  
  <pre><code>chartContainer.selectAll("path")
          .data(data)
          .enter()
          .append("path")
          .attr("d", arc)
          .attr("class", "arc");
  </code></pre>
  
  <p>I would think I'll probably need to enter the data object (data2), and again for the value element. 
  pardon my description. </p>
  
  <pre><code>function(d.value) {???}
  </code></pre>