title: D3.js - Donut charts with multiple rings and animation transition
body: <p>How can you add a transition animation effect to the following D3 chart with multiple rings?</p>
  
  <p>As shown here <a href="https://stackoverflow.com/questions/17507728/d3-js-donut-charts-with-multiple-rings">D3.js - Donut charts with multiple rings</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dataset = {
                  apples: [53245, 28479, 19697, 24037, 40245],
                  oranges: [53, 28, 19, 24],
                  lemons: [53245, 28479, 19697, 24037, 40245],
                  pears: [53245, 28479, 19697, 24037, 40245],
                  pineapples: [53245, 28479, 19697, 24037, 40245],
              };
  
              var width = 460,
                  height = 300,
                  cwidth = 25;
  
              var color = d3.scale.category20();
  
              var pie = d3.layout.pie()
                  .sort(null);
  
              var arc = d3.svg.arc();
  
              var svg = d3.select("#chart").append("svg")
                  .attr("width", width)
                  .attr("height", height)
                  .append("g")
                  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
              var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
              var path = gs.selectAll("path")
                  .data(function (d) { return pie(d); })
                  .enter().append("path")
                  .attr("fill", function (d, i) { return color(i); })
                  .attr("d", function (d, i, j) { return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d); });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="chart" width="600" height="400"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>