title: D3.js - Create multi-ring donut chart dataset from JSON
body: <p>I have been trying to create a multi-ring donut chart by using following json.</p>
  
  <pre><code>var dataset = {
          weeks: [
              {"displayName": "MUW", "name": "DEF", "score": 5},
              {"displayName": "DEFA", "name": "DEF", "score": 35}
          ],
          trimester: [
              {"displayName": "MUsW", "name": "DEsF", "score": 25},
              {"displayName": "DEFdA", "name": "DEdF", "score": 5}
          ]
      };
  </code></pre>
  
  <p>But, it is not considering it as a proper dataset for D3's donut chart.</p>
  
  <pre><code>var gs = svg.selectAll("g")
      .data(d3.values(dataset))
      .enter()
      .append("g")
      .attr("class", "arc");
  </code></pre>
  
  <p>As I want to create two rings from this dataset one is on the top and the other one as an inner donut. And want to display the name on each click of donut slice.</p>
  
  <p><a href="http://jsfiddle.net/pcr3ogt4/" rel="nofollow">http://jsfiddle.net/pcr3ogt4/</a> - code example.</p>