Proximity, similarity, enclosure, connection
Each panel makes the same two groups with a different cue. Try making two cues disagree (give the gapped stations alternating colours) and watch the grouping become unclear.
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
circles drawn: 32 (8 per panel, 4 panels)
groups the eye should see in every panel: 2 (Harbour, University)