How people read charts

Why it matters

A chart is a translation. You start with numbers, encode them as visual properties (position, length, colour, size), and your reader decodes those properties back into numbers in their head. Every encoding loses some accuracy in that round trip, and some lose far more than others. If you choose well, your reader sees the right answer in a second or two. If you choose badly, they misread the data or give up.

This lesson covers the two ideas that most chart advice rests on: the ranking of visual encodings, and pre-attentive attributes.

Not all encodings are equal

In the 1980s the statisticians William Cleveland and Robert McGill ran experiments asking people to compare values shown in different ways. Later studies (including large online replications by Jeffrey Heer and Michael Bostock) found the same order. From most to least accurate for comparing quantities:

1. Position on a common scale: dots or bar ends lined up against the same axis.
2. Position on non-aligned scales: the same, but in separate panels.
3. Length: bars that start from the same baseline.
4. Angle and slope: pie slices, line steepness.
5. Area: bubbles, treemap rectangles.
6. Colour intensity (saturation, lightness): heatmap cells, shaded maps.

That ranking explains a lot of everyday advice:

• A bar chart beats a pie chart for comparing categories, because length on a shared baseline is easier to judge than angle. In a pie with slices of 23% and 26%, most people cannot tell which is bigger. In a bar chart they can.
• Bubble charts exaggerate or hide differences, because people underestimate area. A circle with twice the area does not look twice as big.
• Heatmaps are good for spotting patterns (where is it hot?) but poor for reading exact values. Add the numbers as labels if precision matters.

Rule of thumb: put the comparison that matters most on position or length. Use colour, size and shape for secondary information.

Pre-attentive attributes

Some visual differences are noticed before conscious attention, in roughly a quarter of a second. These are called pre-attentive attributes. Common ones:

• Colour hue (one orange bar among grey ones)
• Intensity (one dark item among light ones)
• Size (one large dot)
• Orientation (one tilted line)
• Enclosure (a box around one region)
• Added marks (an annotation or a bold label)

Try it mentally. Picture a page of 200 grey digits with every 7 printed in orange. You find the 7s instantly. Print them in the same grey and you have to read every digit.

This is a powerful tool and an easy one to misuse. Pre-attentive attributes work only when one or two things stand out. If every bar is a different bright colour, nothing stands out and the reader has to consult a legend for each bar.

Worked example

You need to show that the North region missed its sales target while four other regions hit theirs.

Weak version: a pie chart of sales by region in five bright colours, with a legend on the right. The reader must match colours to the legend, compare angles, and still has no idea what the target was.

Better version:

• A horizontal bar chart sorted from highest to lowest (position and length on a shared baseline).
• All bars grey except North, which is orange (one pre-attentive highlight).
• A thin vertical line at the target value, labelled "Target".
• A title that states the finding: "North was the only region below target in Q3."

The data is identical. The second version answers the question before the reader even reads the axis labels.

Colour with care

• Categorical data (regions, products): distinct hues, ideally no more than about six. Beyond that, group or highlight.
• Ordered data (low to high): one hue that runs from light to dark, called a sequential palette.
• Data with a meaningful midpoint (profit vs loss, above vs below average): two hues diverging from a neutral middle.
• Accessibility: about 1 in 12 men and 1 in 200 women have some colour vision deficiency, most often red-green. Avoid relying on red vs green alone; add labels, different lightness, or position. Tools such as ColorBrewer and the matplotlib "viridis" palette are designed to stay readable.

Common mistakes

• Truncated bar axes. Bars encode value by length, so a bar axis must start at zero. Starting at 90 makes 92 look twice as big as 91. (Line charts and dot plots may zoom in, because they encode position, not length.)
• 3D effects. Perspective distorts length and angle and hides values behind other bars.
• Rainbow colour scales for ordered data. The hue changes create false boundaries.
• Too many highlights. If three things are bold, none of them are.

Quick recap

• Readers decode position and length most accurately; angle, area and colour intensity less so.
• Put your key comparison on a shared axis.
• Use one pre-attentive attribute, sparingly, to point at what matters.
• Choose a colour scheme that matches the data type, and never rely on colour alone.