score:2

Accepted answer

I have figured out a way to do stacked pie charts in D3. I'm not entirely sure if this is the "correct" convention, but it certainly works well. Here's a fiddle to follow along with.

I've restructured my yeas and nays arrays into specifying the data value at the first level (this way, D3 can properly loop) in an object and then also including party and name alongside. Here's an example of how the yeas array looks:

Yeas Array

Essentially there's two arrays, yeas and nays, each having 9 objects withs values: value, party, and name. This way I can pass d3.layout.pie the data of either of the arrays and give the value in that pie layout d.value. More simply said, here's the code snippet to explain:

var yea_pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; })  //This computes a pie value for each yeas.value (d.value)
    .startAngle(-Math.PI/2)
    .endAngle(Math.PI/2);

var yeas_industry = yea_group.selectAll('.arc')
    .data(yea_pie(yeas))  //Pass the yeas variable to yea_pie
    .enter().append('g')
    .attr('class', 'arc'); 

This is really the only solution I've ever seen to doing a stacked pie chart. With that said, I'll mark this correct, but if any one else thinks of a better way, I'd be interesting in knowing.


Related Query

More Query from same tag