Why do bubble charts and pictograms exaggerate?

An infographic from the chain wants to show off that Zapopan sells more than Tonalá. Instead of bars, it draws one circle per branch: bigger means more sales. It looks modern. But one question decides whether it tells the truth: what grew with sales, the circle's width or its surface?

Two measures that grow at once

A bar grows in a single direction: if the amount doubles, the length doubles. A circle, a square or a drawing of a concha (a Mexican sweet bun) grows in two directions at once, height and width. If you double a circle's width, its surface doesn't double: it's multiplied by four (two in width times two in height). And the eye, facing a shape, sees the surface: the blot of ink.

That's what the principle of proportional ink you saw with the cut axis calls for: the shaded surface has to be proportional to the data. A shape that grows in width and height with the data breaks that rule, and it breaks it by exaggerating: what's big looks much, much bigger.

The trap shows up in many places:

Pictograms that draw a bigger object (a money bag, a loaf of bread) instead of more objects of the same size.
Bubbles on maps and charts, when their diameter grows with the data instead of their area.
3D effects, where perspective makes whatever is in front bigger and adds a third direction to the shape.

Try it

This bubble chart falls right into the trap: each circle's width grows with sales, so its area grows with sales squared. First look at how many times bigger Zapopan looks than Tonalá. Then fix it.

Your turn

Make one change (the field names are in Spanish: ventas_al_cuadrado is sales squared, ventas_millones sales in millions): in size, change "field": "ventas_al_cuadrado" to "field": "ventas_millones". That way each circle's area is proportional to its sales, not to its sales squared.

You're done when Tonalá's circle grows and Zapopan's looks about three times bigger, not ten. If you want an even better comparison, remember that the sorted bars from the comparing page say the same thing without this trap.

Chart spec (Vega-Lite JSON)

Edit the JSON; the preview updates when you pause.

How this maps to Altair

Altair builds this same JSON: chart.to_json() prints it. "mark": "point" is alt.Chart(df).mark_point(). Each encoding channel is an argument to .encode(), such as x=alt.X("field:Q", scale=alt.Scale(type="log")) or color="field:N". Each transform entry is a call such as .transform_filter("datum.year == 2007").

Run it yourself

In the trap version, Zapopan looked about ten times bigger than Tonalá (149.8 against 14.1 in area). With the fix it looks about three times bigger, which is what the numbers say: 12.24 against 3.75 million, 3.3 times.

What you can do when reading

You won't always know how a shape was drawn. But you can do two quick things:

Look for the numbers. If the shape comes with its amount written on it, divide the big one by the small one and compare with how it looks to the eye. If the difference by eye is much bigger, the shape is exaggerating.
Ask what grew. If it's a drawing that got taller and wider, be suspicious. An honest pictogram shows more objects of the same size (ten loaves against five), not one bigger loaf.

And when the chart is yours and the question is comparing amounts, the safest way out is still the usual one: sorted bars starting at zero.

Saw an infographic with shapes of different sizes and not sure whether it exaggerates? Describe it to your Maestro with its numbers.

Check yourself: An infographic says "we doubled sales" and shows it with two bolillos (Mexican bread rolls): this year's is twice as tall and twice as wide as last year's. What does the reader see?

What about bubble maps? Ask your Maestro how to tell whether a bubble grows with its area or with its width.