Command Palette

Search for a command to run...

Hectal
PHASE 2Beginner ~26 min· topic 4 of 6

Topic 2.4

How Eyes Group Things

In one line

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.

0/6 · 0%

Think of it like this

A night sky. Nobody sees thousands of separate stars. You see the Plough, a W, a belt of three, because your eyes join stars that are close, or equally bright, or in a line. Your brain groups first and reads second, and it does so without being asked. A chart can use that, or fight it.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Gestalt
A set of rules, from psychology, for how the eye groups shapes: proximity, similarity, enclosure, connection.
proximity
Things that are close together are seen as a group.
enclosure
Things inside the same border or background are seen as a group.
pre-attentive
Noticed almost instantly, before you start searching: one odd colour, size or position.
emphasis (highlight)
Making the important marks stand out, by colour or weight, while the others stay quiet.
small multiples
The same small chart repeated for each group, with identical axes, so you can compare shapes.
shared scale
Every small chart uses the same y axis range, so heights mean the same on each.
clutter
Marks, lines and labels that do not help the reader but compete for attention.

Step by step

01The same eight dots, four cues

The first example draws the same eight stations four times. The four Harbour stations (Quay, Market, Chapel, Library) and the four University stations (Campus, Science Park, Station Road, Fish Market) are the two groups. Each panel shows one cue: a gap, a colour, a box, a line.

Each cue alone makes two groups. Where two cues are combined they must agree: if the gap says one grouping and the colour another, the eye hesitates (the note under the example suggests a test).

02One highlight against many

The second example draws the 25 stations' share of full docks three ways: one orange bar among grey, 25 rainbow bars, and 12 orange bars among grey. It prints how many different colours the reader must tell apart and how many marks are highlighted.

The first draws the eye to the answer. The second makes every bar equally loud. The third highlights so much that nothing stands out.

03Test your chart with a squint

Before you split anything, squint at the chart or blur your eyes. What still stands out? What groups together? If the important thing disappears when you squint, the emphasis is too weak. If everything stands out, it is too strong.

Also check it without colour (a greyscale screenshot works): can you still find the answer? Topic 10.2 turns this into a proper test.

04Split a crowded chart into small multiples

The third example draws monthly rides per district. First as six lines on one chart: lines cross and overlap, and you need the legend to follow any of them. Then as six small charts with the same y axis: each shape is clear.

Westpark's three stations opened on 10 May, so January to April has no data. The small chart starts the line in May instead of drawing zeros (and May itself is a part month, which is why its value is low). And with each chart on its own y scale, Westpark would look as tall as Harbour, so the example prints the difference.

Try it yourself

  1. 1

    Strengthen, then remove, the cues

    In the first example, change the first panel's call from panel("1. Proximity (a gap)", 10, 0, gapped, [GREY, GREY]) to use [A, B] instead of [GREY, GREY]: the gap and the colour now agree and the two groups are stronger. Then use even instead of gapped with [A, B]: the groups survive on colour alone. Finally use even with [GREY, GREY]: eight dots, no groups at all.

  2. 2

    Draw a missing month as zero

    In the third example, change the four null values of Westpark's list to 0. The Console prints the same peaks, but its last line now says Westpark has data from month: 1 (May): the code counts the zeros as data, and the hard-coded "(May)" no longer matches. In the Preview, Westpark's line runs along the floor from January to April and then climbs, as if the district existed and nobody rode. No error appears. This is the picture the data file would give you if you plotted its zeros.

Code & diagrams

Proximity, similarity, enclosure, connection New tab

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.

Preview

Press Run to see the page.

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)
One highlight, too many colours, too many highlights New tab

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.

Preview

Press Run to see the page.

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
Six lines or six small charts? New tab

The data is inline here (summed from station-month.csv), so the example runs without waiting. The drawer shows the source files.

Preview

Press Run to see the page.

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)

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Give every small chart its own scale

In the third example, replace the ymax argument of the small multiples' line(...) call with Math.max(...v.filter((x) => x !== null)).

terminal
$ Preview
── what you'll see ──
All six small charts now peak at the same height: Westpark's curve (peak 8,295) looks as tall as Old Town's (peak 29,798). The Console prints the same four lines as before, including "shared y scale: Westpark's peak is drawn 28% as tall as Old Town's", which is no longer what the picture shows. No error appears.

Myth vs fact

Myth

Colour makes a chart easier to read.

Fact

Colour helps when it points at the answer. Many colours at once make the eye search, and any colour fails for readers who cannot tell them apart. Use few colours, and add a second cue (a label, bold text).

Myth

A legend is the way to explain colours.

Fact

A legend makes the eye travel between the key and the marks and back. Where you can, label the marks directly.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    The connection cue is among the strongest grouping cues in perception experiments, which is why a line chart's line reads as one thing even through noisy points, and why a lone dot floating between two lines can be misread as belonging to neither.

  • ▸

    For accessibility, colour alone must not carry a meaning (Phase 15): highlighted bars are also bold-labelled and have the numbers written out. About 1 in 12 men and 1 in 200 women have some colour-vision difference, so test your highlight in a greyscale or colour-blind simulation (Topic 10.2).

Remember this

  1. 1

    The problem this solves: a dashboard with 25 coloured bars, six lines and ten labels is hard to read, even if every number is right. Nothing tells the eye where to look. Grouping and emphasis tell it where to look first and what belongs together.

  2. 2

    The four grouping rules (Gestalt). Gestalt is a German word for "form" and names a set of rules for how people group shapes. Proximity: things close together form a group. Similarity: things that look alike (same colour or shape) form a group. Enclosure: things inside a shared border or background form a group. Connection: things joined by a line form a group, and in experiments this is one of the strongest cues. Use the same rule for the same meaning everywhere on the page.

  3. 3

    Cues must agree. If two stations sit apart but have the same colour, the eye is torn between "two groups, because of the gap" and "one group, because of the colour". Make the cues say the same thing: the stations of one district should be close, in one colour, and optionally enclosed. Many confusing charts are charts whose cues disagree.

  4. 4

    Pre-attentive attributes. A few properties are noticed in a fraction of a second without searching: a different colour, a different size, a different position, a different orientation. This is why one orange bar among grey ones jumps out at once. The effect only works when the odd one is rare. If 12 of 25 bars are orange, nothing stands out, and 25 different hues means none of them does. Recall from Topic 2.2: hue tells things apart, so it is right for "which district" and wrong for "how many".

  5. 5

    Highlight one thing. Pick the one message ("Five stations are below 40% full"), colour only those marks, and keep everything else a quiet neutral. Add a direct label ("6 of 30") on the highlighted marks rather than a legend, because a legend makes the eye travel back and forth. Also check that colour is not the only cue: bold the labels or add a mark, so people who cannot tell the colours apart still find the answer.

  6. 6

    Clutter and small multiples. Every extra line, gridline, border and label competes for attention. Remove what does not help. When many series crowd one chart (six districts in six coloured lines), draw small multiples: the same small chart repeated once per group, side by side, with the same scale on every one. The eye compares the shapes quickly because the layout never changes. If the scales differ, the comparison is false: a tiny district looks as big as a huge one.

Explain it without notes

01

Name the four Gestalt grouping rules and give a chart example of each.

02

Why does one orange bar among grey ones stand out, and when does that stop working?

03

What are small multiples, and why must they share a scale?

04

What does it mean that cues must agree?

Practice

01

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.

02

Twelve of 25 bars are highlighted in one accent colour. What is wrong and what do you change?

Trade-offs

  • ↔

    Small multiples use more screen space than one combined chart but remove overlap and the legend. Use them when there are more than 3 or 4 series or when the lines cross.

  • ↔

    Strong emphasis tells one story clearly but hides the rest. Keep the context in neutral grey instead of removing it, so the reader can check the story.

Done when you can

  • I can name the four grouping rules and use them for a real group of stations.

  • I make proximity, colour and borders agree.

  • I highlight one thing with one accent colour and label it directly.

  • I use small multiples with a shared scale when lines crowd one chart.

  • I treat a missing period as a gap, not a zero.