25 stations, one small chart each
Same data, same lines, two scales. Left: S25 is a low line, which is true. Right: it fills its box and looks as busy as S01, which is not.
A heatmap colours a grid of cells by a number, which shows a pattern in two directions at once, like day by hour. Small multiples repeat one small chart for many groups, with the same scale so the groups can be compared.
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.
Colour the weekend rows' labels differently: in the heatmap, add a second y axis tick label colour for days 1, 7, 8, 14, 15, 21, 22, 28 and 29.
Draw the first example as weekday by hour (7 rows) using the mean rides per hour. Hint: d3.rollup(rows, (v) => d3.mean(v, (d) => d.rides), (d) => d.weekday, (d) => d.hour).
Explain it without notes
What are the three scales of a heatmap?
Why is a rainbow a poor palette for a heatmap?
What is the difference between a shared and a free scale in small multiples?
Preview
Console
Nothing logged yet.Expected console output
charts per grid: 25 | tallest peak: 7260 | S25 peak: 1833
S25 line height: shared 12 px of 46 | free 46 px
S22 months with no rides: Jan, Feb, Mar, Apr