d3 donut charts of varying radius

Question

I would like to recreate something similar to the following examples:

http://bl.ocks.org/mbostock/3888852

http://bl.ocks.org/mbostock/1305111

The only difference is that I want to control the radius of each donut, rather than having it be the same for all of them. How do I dynamically vary the radius of the donut charts?

Answer 1

For this, you need to adjust the .innerRadius() and/or .outerRadius() dynamically for each appended pie chart, for example

svg.selectAll(".arc")
  .data(function(d) { return pie(d.ages); })
.enter().append("path")
  .attr("class", "arc")
  .attr("d", function(d, i) { return arc.innerRadius(radius - 30 * Math.random())(d, i); })
  .style("fill", function(d) { return color(d.data.name); });

Complete example here. In a real example, you'd want to specify the radius in the data and reference that instead of making up a random number for each segment of the pie chart. Then you can also have the same radius for all the segments in the same pie chart.