E-bikes and pedal bikes by month, as stacks and as a share
Left: amounts. Right: shares. The left chart says summer is busy, the right one says the e-bike share rises all year, even in winter when fewer people ride.
d3.stack adds up several series so that each bar or area starts where the one below it ends. You choose the order and the offset (plain, 100%, or above and below zero), and you learn which questions a stack answers and which it hides.
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.
Take the first example's months and print, for February, how many rides the pedal series covers (y1 - y0). Use d3.stack().keys(["ebike", "pedal"]).
Turn step 2 into a chart of the two largest districts and one "Other" series that adds the rest. Hint: build the wide table again with three keys.
Explain it without notes
What does d3.stack return for one month and one key?
When would you choose grouped bars over stacked bars?
What can a 100% stack show that a normal stack cannot, and what does it lose?
Preview
Console
Nothing logged yet.Expected console output
e-bike share in January: 28.3% July: 33.3% December: 37.7%
e-bike rides: January 12304 July 39251
total in the year: 933651