I'd like to modify Mike Bostock's nested pies example http://bl.ocks.org/mbostock/1305337 to have different pie sizes per the number of flights in each airport; to have a visual idea of how busy each airport is. My guess is to sum up the number of flights via .rollup(function(leaves) { return {"total_flights": d3.sum(leaves, function(d) {return +(d.flights);})} }) (from http://bl.ocks.org/phoebebright/raw/3176159/) and apply it somehow to r (radius) but as I'm still learning, I don't know where to inject it.
Appreciate your tips/help.
Create an object w/ each origin's total flights:
var totalFlights = {};
airports.forEach(function(d){
totalFlights[d.key] = d3.sum(d.values.map(function(d){ return +d.count; }));
});
Size the arcs based on their origin's total flights:
var arc = d3.svg.arc()
.innerRadius(function(d){ return totalFlights[d.data.origin]/952 * r / 2; })
.outerRadius(function(d){ return totalFlights[d.data.origin]/952 * r; });
952 is a bit of a magic number here, set equal to the max number of flights from an airport. Ideally, you'd use a scale instead.
Working example: http://bl.ocks.org/1wheel/6471631