This aster plot displays pie slices as lengths extending outward to the edge (0 at inner to 100 at outer). Widths of the pie slices represent the weight of each pie, which gets used to arrive at a weighted mean of the length scores in the center.
Jim Regetz @regetz developed the initial aster plot function in R (see aster-plot on github)
Parker Abercrombie @parkerabercrombie developed the initial D3 prototype varying 3 of the 4 arc elements starting with Mike Bostock's Donut Chart:
- outerRadius
- startAngle
- endAngle
This is the only example pie chart I've encountered on the web (after much searching) which varied individual arc segments by all 3 (usually just startAngle and endAngle with fixed innerRadius and outerRadius, even if done with multiple rows as with the very cool Zoomable Sunburst). The outline of the pie chart is generated in addition to the outerRadius-varying segments. For more details, see the d3 Pie Layout documentation.
Tooltips on hover are rendered via the d3-tip library.
This effort was made possible through the NCEAS Open Science CodeFest Sep 2-4, 2014 in Santa Barbara, CA.
Ben Best @bbest adapted Parker's prototype to CSV data from the Ocean Health Index. For more details on the data prep, see ohi-aster on github.
This is really close to what I'm looking for... I have a several questions (i.e., need some help) to determine if I can adapt this to our needs...
How would I reference the data in the script rather than in a separate .csv file (we'll be pulling data from a database)?
Is it possible to set the angles for the segments? (we will always have 3 segments of equal weight, and want to have one segment on "top" with each of the other two segments below and on either side -- when I test it 'as is' with 3 rows of data of equal weight, it's "upside down" from where I need it)
How would I get the svg to be generated within a specified div element? I've tried changing
var svg = d3.select("body").append("svg")
to
var svg = d3.select("#graph").append("svg")
and then adding a div id=graph to the html, but then nothing gets rendered at all.
Is it possible to have lines drawn around the circumference at set intervals? (e.g., in addition to the outerRadius circle being drawn, also draw at regular intervals from the center out - 10, 20, 30, 40, etc?)
Thanks,
Scott