What pie and arc return, and a district donut
The six totals are copied from station-month.csv (summed by district). The slices keep their input order (sort(null)), which here is already largest first.
d3.pie turns numbers into angles and d3.arc turns angles into path text, which makes pies and donuts. They show a part of one whole well for two to five slices, and badly beyond that: the honest alternative is a sorted bar chart.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make shareLabel(slices) that returns, for each slice, name + " " + percent and returns "" for a slice narrower than 5 degrees.
Turn the district donut into a half circle gauge: use startAngle(-Math.PI / 2) and endAngle(Math.PI / 2) on the pie.
Explain it without notes
What do d3.pie and d3.arc each do, and why are there two?
Why does d3.pie give the zero slice index 3 in the first example?
Why is a pie of 25 stations a poor chart, and what do you use instead?
Preview
Console
Nothing logged yet.Expected console output
default sort a #0 0.0-180.0 | b #3 360.0-360.0 | c #1 180.0-288.0 | d #2 288.0-360.0
sort(null) a #0 0.0-180.0 | b #1 180.0-180.0 | c #2 180.0-288.0 | d #3 288.0-360.0
negative value 0.0-200.0 | 360.0-360.0 | 200.0-360.0
empty array []
all zero 0.0 | 0.0
one slice 0.0-360.0
padAngle(0.05) 0.0-224.3 | 224.3-360.0
quarter pie M0,-80A80,80,0,0,1,80,0L0,0Z
donut quarter M0,-80A80,80,0,0,1,80,0L40,0A40,40,0,0,0,0,-40Z
full circle M0,-80A80,80,0,1,1,0,80A80,80,0,1,1,0,-80Z
NaN angle M0,-80LNaN,NaNZ
slices: 6 | total: 933651