June by day and hour
The rows are the 30 days (1 to 30 June) and the columns the 24 hours. Hover a cell in your own page to see the <title> text: it is the cheapest tooltip (Topic 8.2 builds a better one).
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
cells: 720 | days: 30 | hours: 24
busiest cell: Thu 26 June at 17:00 with 599 rides
cells with no rides: 42 | median cell: 78.5
cells in the palest tones: linear 337 sqrt 164