One highlight, too many colours, too many highlights
The left panel highlights the five emptiest stations. The middle panel gives every bar its own hue. The right panel highlights nearly half of them.
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
colours to tell apart: one highlight = 2 | rainbow = 25 | many highlights = 2
share of bars highlighted: one highlight = 20% | rainbow = 100% | many = 48%
bars: 25