Graphical perception

Lecture 24

Dr. Mine Çetinkaya-Rundel

Duke University
STA 313 - Spring 2026

Warm up

Setup

# load packages
library(tidyverse)

# set theme for ggplot2
ggplot2::theme_set(ggplot2::theme_minimal(base_size = 16))

# set figure parameters for knitr
knitr::opts_chunk$set(
  fig.width = 7, # 7" width
  fig.asp = 0.618, # the golden ratio
  fig.retina = 3, # dpi multiplier for displaying HTML output on retina
  fig.align = "center", # center align figures
  dpi = 300 # higher dpi, sharper image
)

A foundational paper

Cleveland & McGill (1984)

“Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods”

Journal of the American Statistical Association

William S. Cleveland and Robert McGill (AT&T Bell Labs)
One of the most influential papers in data visualization
Established empirical foundations for graph design
Over 2,800 citations

The central question

What makes some graphs easier to read than others?

Cleveland & McGill’s approach:

Identify elementary perceptual tasks used when reading graphs
Rank these tasks by accuracy of human judgment
Test the ranking experimentally
Apply findings to redesign common graph types

What is graphical perception?

Graphical perception is the visual decoding of information encoded on graphs, i.e., the mental-visual tasks we perform to extract quantitative information:

Judging positions along a scale
Comparing lengths
Estimating angles
Perceiving areas
Distinguishing colors/shades

Elementary perceptual tasks

10 Elementary perceptual tasks

Cleveland & McGill identified 10 basic visual tasks people use to extract quantitative information from graphs:

The accuracy hierarchy

Cleveland & McGill hypothesized a ranking from most accurate to least accurate:

Rank	Elementary Perceptual Task
1	Position along a common scale
2	Position along non-aligned scales
3	Length, direction, angle
4	Area
5	Volume, curvature
6	Shading, color saturation

Important

Design principle: Use elementary perceptual tasks as high in the hierarchy as possible.

Why this ordering?

The ordering is based on:

Psychophysical theories:
- Stevens’ Power Law
- Weber’s Law
Prior experimental research on magnitude estimation

Stevens’ Power Law

Perceived magnitude \(p\) relates to actual magnitude \(a\) by:

\[p = k \cdot a^\alpha\]

For length: \(\alpha \approx 1\) (accurate)
For area: \(\alpha < 1\) (underestimate)
For volume: \(\alpha << 1\) (severely underestimate)

Get ready to answer some questions!

https://app.wooclap.com/STA313S26

Question 1

Which of the following is true?

Plot A has more points than Plot B
Plot B has more points than Plot A
Plot A and Plot B have the same number of points

Question 2

Which of the following is true?

Plot A has more points than Plot B
Plot B has more points than Plot A
Plot A and Plot B have the same number of points

Question 1

set.seed(123)

n1 <- 10
x <- runif(n1, 1, 100)
y <- 0.5 * x + rnorm(n1, mean = 0, sd = 20)
df <- tibble(x = x, y = y)
ggplot(df, aes(x = x, y = y)) +
  geom_point(size = 3) +
  labs(title = "Plot A")

n2 <- 20
x <- runif(n2, 1, 100)
y <- 0.5 * x + rnorm(n2, mean = 0, sd = 20)
df <- tibble(x = x, y = y)
ggplot(df, aes(x = x, y = y)) +
  geom_point(size = 3) +
  labs(title = "Plot B")

Question 2

set.seed(456)

n3 <- 120
x <- runif(n3, 1, 100)
y <- 0.5 * x + rnorm(n3, mean = 0, sd = 200)
df <- tibble(x = x, y = y)
ggplot(df, aes(x = x, y = y)) +
  geom_point(size = 3) +
  labs(title = "Plot A")

n4 <- 110
x <- runif(n4, 1, 100)
y <- 0.5 * x + rnorm(n4, mean = 0, sd = 200)
df <- tibble(x = x, y = y)
ggplot(df, aes(x = x, y = y)) +
  geom_point(size = 3) +
  labs(title = "Plot B")

Weber’s Law

Just noticeable difference is proportional to the magnitude of the initial stimulus.

The minimum increase of stimulus which will produce a perceptible increase of sensation is proportional to the pre-existent stimulus.

Common graphs and their tasks

Graph Type	Primary Perceptual Task
Bar chart (simple)	Position on common scale
Grouped bar chart	Position on common scale
Stacked bar chart	Length (for non-baseline segments)
Pie chart	Angle
Bubble chart	Area
Choropleth map	Shading/color
Treemap	Area

Example: Bar chart vs. Pie chart

Bar chart

Primary task: Position along common scale
High accuracy
Easy to compare values

Pie chart

Primary task: Angle judgment
Lower accuracy
Harder to compare non-adjacent slices

The experiments

Experimental design

Cleveland & McGill ran two main experiments.

Experiment 1: Position-length judgments using bar charts
Experiment 2: Position-angle judgments comparing bar charts and pie charts

Experiment 1: Position-length

55 subjects judged divided bar charts
5 types of bar chart configurations
Tasks:
- Which of the two indicated (with a dot) bars or two segments is smaller?
- What percentage is the smaller of the larger?

Experiment 2: Position-angle

54 subjects judged pie charts vs. bar charts
10 sets of values, each shown as pie and bar
Tasks:
- Which bar or segment is largest?
- What percentage each of the other four values is of the largest bar or segment?

Measuring accuracy

They used log absolute error:

\[ \text{Error} = \log_2\left(|\text{judged percent} - \text{true percent}| + \frac{1}{8}\right) \]

Why log scale?

Measures relative error (a 5% error on 10% is worse than 5% error on 80%)
The \(\frac{1}{8}\) prevents \(\log(0)\) issues
Robust to outliers

Experiment results

Log absolute error means and 95% confidence intervals for judgment types in position-length experiment (top) andposition-angle experiment (bottom).

Position-length: Average errors for length judgments are considerably larger than those for position judgments.

Position-angle: Average errors for angle judgments is considerably larger than for position judgments.

Activity

Task

For each chart shown, identify the smaller of two marked values (A or B), then estimate what percentage the smaller is of the larger.

Make a quick visual judgment
Do NOT measure or calculate
Record your answer

Activity instructions

You will see 6 charts - 2 of each type:
- Bar charts (position judgment)
- Pie charts (angle judgment)
- Bubble charts (area judgment)
For each chart:
- Identify which value (A or B) is smaller
- Estimate: “The smaller is ___% of the larger”
Record answers on the provided sheet

Practice: Bar chart

Which is smaller? What % is it of the larger?

Practice answer

A = 35, B = 70

A is smaller.

True percentage: 35/70 = 50%

How close was your estimate?