Six lines or six small charts?
The data is inline here (summed from station-month.csv), so the example runs without waiting. The drawer shows the source files.
The eye groups things before it reads them: dots that sit close, look alike, share a box or are joined by a line look like one group. One strong colour among greys is noticed in a flash. Use these rules to guide attention, and split a crowded chart into small multiples.
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.
Write highlight(rows, n) that returns each row with colour: "#e76f51" for the first n rows and "#c5ccd3" for the rest, and returns every row grey (with a console warning) when n is more than a third of the rows. Test it with 25 rows and n = 5 and n = 12.
Twelve of 25 bars are highlighted in one accent colour. What is wrong and what do you change?
Explain it without notes
Name the four Gestalt grouping rules and give a chart example of each.
Why does one orange bar among grey ones stand out, and when does that stop working?
What are small multiples, and why must they share a scale?
What does it mean that cues must agree?
Preview
Console
Nothing logged yet.Expected console output
peaks: Harbour 29654, Old Town 29798, University 18110, Riverside 16720, Hillcrest 15226, Westpark 8295
independent y scales: every district's peak would be drawn 100% tall
shared y scale: Westpark's peak is drawn 28% as tall as Old Town's
Westpark has data from month: 5 (May)