25 stations as a pie, and as bars
Same numbers, two charts. The pie needs a label rule (only slices over 12 degrees) and still leaves the small ones unnamed. The bars label every station.
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
slices: 25 labelled: 18
S01: 22.6 degrees S25: 4.0 degrees
slices narrower than 10 degrees: 5
S17 vs S12 rides: 35963 vs 35486 | bar width in pixels: 147.33 vs 145.37
S17 vs S12 angle: 13.87 vs 13.68 degrees