Guidelines
Suggest edit

Scale circle size by area, not radius

For magnitude comparison, use area-proportional size encoding on circle-based charts to improve fidelity and mitigate exaggerated size differences for chart readers.

  • purpose:refine
  • basis:empirical
  • task:compare
  • data:quantitative
  • quality:fidelity:use
  • lever:encoding
  • channel:area:use
  • operator:difference

advice

Circle size mapping

Map quantitative values to circle area rather than to circle radius. For example, size a bubble so a doubled value doubles the visible area, not the radius, because radius mapping makes one value look much larger than another.

reason

Why area-proportional sizing matters

Readers compare the visible size of the circle, not the hidden geometry formula. When the value is mapped to radius, the displayed area grows exponentially, so the chart overstates the difference between values.

Mechanism: Area-proportional sizing keeps the visible mark size aligned with the data, while radius-based sizing inflates the larger mark and exaggerates the message.

Evidence: In the circle-size experiment, the deceptive size mapping led readers to judge the larger value as much bigger than in the area-proportional control (mean 2.71 vs. 1.71 on a 5-point scale; p = 0.0007) (Pandey et al., 2015).

context

Use when circle size carries the quantitative message

  • User Goal: Judge how much one value exceeds another from mark size.
  • Task: Compare magnitude differences.
  • Data: Quantitative values encoded by circle size.
  • Chart Setting: A bubble-like display where circle size is the main quantitative cue.
  • Audience: Readers relying on the visual size comparison instead of recalculating from labels.
  • Success Criterion: The perceived size difference tracks the data difference instead of an inflated visual contrast.

exceptions

Do not apply this outside circle-size encodings

Break it when: The chart does not encode magnitude with circle size. Why: This guideline targets area-based marks where scaling the wrong geometric variable makes the visible size grow faster than the data.

costs

Costs of area-proportional sizing

Sacrifice: You give up some dramatic visual separation between values. Risk: Moderate differences can look less forceful than in a radius-mapped version. Mitigation: Keep the area-proportional sizing and accept the less dramatic appearance to preserve the data message.

mistakes

Common failure mode

Mistake: Print the numeric value inside the circle but still size the mark by radius. Why it fails: The study showed that readers still formed exaggerated size judgments even when the chart displayed the actual values.

check

How to review the size mapping

Failure Sign: The larger circle looks disproportionately larger than the data ratio. Quick Check: Inspect the sizing rule; if doubling the value doubles the radius instead of doubling the area, the chart uses the distortion tested here. Stronger Test: Build an area-proportional version of the same chart and compare “how much bigger” judgments between the two versions.

fix

What to change

  • Recalculate circle size from target area rather than radius.
  • Redraw the circles so the area ratio matches the data ratio.
  • Remove radius-based sizing rather than trying to correct it with printed values alone.

References

Pandey, A. V., Rall, K., Satterthwaite, M. L., Nov, O., & Bertini, E. (2015). How Deceptive are Deceptive Visualizations?: An Empirical Analysis of Common Distortion Techniques. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems, 1469–1478. https://doi.org/10.1145/2702123.2702608