Perception and Cognition in Data Visualization
Prasanna Parasurama
Find the “Q”
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOQOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Shape is the only distinguishing feature
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOQOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Color supplies an additional contrast
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOQOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Size supplies an additional contrast
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOQOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
Enclosure supplies an additional contrast
What makes a visualization good?
1
A good visualization has a purpose.
2
It fulfills that purpose when it communicates the relevant patterns and insights in the data:
A Effectively
B Efficiently
C Truthfully
Perception
What viewers notice and judge
Cognition
How viewers interpret and use it
Same data, different purposes, different charts
Exact lookup
| Region | Sales |
|---|---|
| North | 62 |
| South | 48 |
| West | 79 |
| East | 43 |
Same data, different purposes, different charts
| Chart | Relationship emphasized | Question made easier |
|---|---|---|
| Slope chart | Change between Q1 and Q2 | Which region increased the most? |
| Grouped bars | Absolute revenue | Which region was largest in each quarter? |
| 100% stacked bars | Regional share of quarterly revenue | How did the composition change? |
Visualization is an encoding-decoding system
Author
Starts with purpose and data.
- Chooses which data to include
- Selects marks and channels
- Adds scales, labels, and context
Encoding→
Visual representation
Data become positions, lengths, colors, shapes, connections, and text.
The display carries some relationships with greater precision than others.
Decoding→
Viewer
Perceives groups and contrasts, reads scales, compares marks, and connects the result to a question.
Prior knowledge and attention affect the interpretation.
How data are encoded in a scatterplot
Campaign → point
Each campaign becomes one point.
Campaign spend → x-position
Spend determines horizontal position.
Attributed sales → y-position
Sales determine vertical position.
Marketing source → color
Color distinguishes source categories.
Encoding maps data properties to visual properties through marks and channels
Marks
Geometric objects that represent data.
Point
Line
Area
One row can become a point. A sequence can become a line. A region or accumulated quantity can become an area.
Channels
Properties of marks that vary with data.
Channel selection depends on data type and perceptual accuracy
| Data type and examples | Channel | Use | Visual encoding | Example charts |
|---|---|---|---|---|
| QuantitativeRevenue · price · temperature | Position | Precise magnitude and comparison on a common scale |
|
Scatter, dot, line |
| Length | Magnitude from a common baseline |
|
Bar, lollipop | |
| Area / size (less accurate) | Broad magnitude when exact lookup is secondary |
|
Bubble, pie chart | |
| Luminance / saturation (less accurate) | Broad quantitative ordering or spatial patterns |
|
Heatmap, choropleth | |
| Categorical (nominal)Region · product · segment | Hue | Category identity without order |
|
Colored scatter or map |
| Shape | Category identity or a redundant accessibility cue |
|
Scatter by category | |
| Position / grouping | Separate categories into distinct spatial groups |
|
Grouped bars, facets | |
| Categorical (ordinal)Rating · priority · education | Ordered position | Preserve the prescribed category sequence in rows or columns |
|
Ordered bar chart, Likert display |
| Luminance / saturation | Show low-to-high levels without implying precise distance |
|
Ordinal heatmap, severity matrix | |
| TemporalDate · month · quarter · time | Connection | Change across sequential observations |
|
Line, slope |
| Length | Duration between start and end |
|
Gantt, range plot |
In-class activity: Estimate the value
Graphical perception lab
- View each chart.
- Estimate the requested value or ratio.
- Record your estimate.
Results from a study of graphical perception
Lower log error means more accurate judgments. The study finds systematic differences across graphical encodings.
← More accurateLog errorLess accurate →
Experimental results panel from Figure 4 in Heer and Bostock (2010). Points are mean log errors; bars are 95% confidence intervals.
T1 · Single bar chartCompare two marked bar tops sharing one scale and baseline.
T2 · Divided barsCompare endpoints of marked bottom segments in two divided bars.
T3 · Separate bar groupsCompare marked bars in different clusters on the same scale.
T4 · Aligned lengthsCompare marked segment lengths beginning at a common baseline.
T5 · Unaligned lengthsCompare marked segment lengths at different vertical positions.
T6 · Pie angleCompare two marked wedge angles within a pie.
T7 · Bubble areaCompare two marked circle areas among distractor bubbles.
T8 · Centered rectanglesCompare center-aligned rectangle areas with varying aspect ratios.
T9 · Treemap areaCompare two marked rectangle areas inside a treemap.
Encoding quantitative data
Quantitative data record numerical magnitudes for which differences are meaningful – e.g., revenue, units sold, duration, and temperature.
- Use position or length first.
- Use area and luminance/saturation to encode additional variables.
Color can add a third quantitative variable
How is color used here?
1
x-position
Year
2
y-position
State or jurisdiction
3
color luminance and saturation
Number of reported cases
Color adds a third quantitative variable. It supports scanning for outbreaks and the decline after vaccination; it does not support precise case lookup.
How many variables? How many channels?
Source: Gapminder Foundation, via Datylon, “A deep dive into… bubble charts”
If bars support more precise comparisons, why are pie charts so common?
- Pie charts are familiar, compact, and readable when there are only a few clearly different shares.
- Stacked bars are still better for precise comparisons.
Encoding nominal data
Nominal data identify categories with no inherent order– e.g., region, product, marketing source.
- Hue and shape identify categories; position can separate them into groups. None of these channels implies that one category is numerically larger than another.
Color is harder to distinguish on smaller marks
- Mark size changes color discrimination: Small marks make similar hues harder to distinguish. Use high-contrast colors and add shape, labels, or separated position when needed.
Encoding ordinal variables
Ordinal variables place categories in a meaningful sequence, but the differences between adjacent levels are not measured or assumed equal. Examples include education level, satisfaction, and priority.
- The bar chart preserves the order of education levels; bar length encodes employee count.
- In the heatmap table, light-to-dark teal preserves the order Low → Medium → High, while text identifies each category.
Good or Bad Use of Color?
Recap
| Data type and examples | Channel | Use | Visual encoding | Example charts |
|---|---|---|---|---|
| QuantitativeRevenue · price · temperature | Position | Precise magnitude and comparison on a common scale |
|
Scatter, dot, line |
| Length | Magnitude from a common baseline |
|
Bar, lollipop | |
| Area / size (less accurate) | Broad magnitude when exact lookup is secondary |
|
Bubble, pie chart | |
| Luminance / saturation (less accurate) | Broad quantitative ordering or spatial patterns |
|
Heatmap, choropleth | |
| Categorical (nominal)Region · product · segment | Hue | Category identity without order |
|
Colored scatter or map |
| Shape | Category identity or a redundant accessibility cue |
|
Scatter by category | |
| Position / grouping | Separate categories into distinct spatial groups |
|
Grouped bars, facets | |
| Categorical (ordinal)Rating · priority · education | Ordered position | Preserve the prescribed category sequence in rows or columns |
|
Ordered bar chart, Likert display |
| Luminance / saturation | Show low-to-high levels without implying precise distance |
|
Ordinal heatmap, severity matrix | |
| TemporalDate · month · quarter · time | Connection | Change across sequential observations |
|
Line, slope |
| Length | Duration between start and end |
|
Gantt, range plot |
Practical tips when deciding channels
- Begin with purpose and data.
- Identify the audience and the lookup, comparison, pattern, or decision the visualization must support.
- Identify each variable as quantitative, nominal, ordinal, or temporal.
- Use position or length first for quantitative comparisons.
- They support more accurate estimates than angle, area, luminance, or saturation.
- Use area or color when an additional variable needs a channel.
- These channels work well for broad patterns when exact estimation is secondary.
- Give each variable one primary channel.
- Add a redundant cue only when it improves grouping, accessibility, or emphasis.
- A redundant channel should perform a clear perceptual job.
Redundant encoding needs a reason
Unnecessary: position and labels already identify each source; the legend adds lookup without supporting another comparison.
Useful: color preserves source identity across spatially separated quarter groups, making within-source comparisons easier.
Gestalt principles
How viewers organize marks into groups, paths, and foreground.
ProximitySimilarityEnclosureConnectionContinuityClosureFigure-ground
Channels encode marks; Gestalt principles organize them into groups
Gestalt principles describe how viewers organize separate marks into larger structures.
| Principle | The viewer tends to treat marks as related when they… |
|---|---|
| Proximity | are close together |
| Similarity | share appearance |
| Enclosure | fall inside the same boundary |
| Connection | are linked directly |
| Continuity | form a smooth path or aligned edge |
| Closure | imply a familiar complete form |
| Figure-ground | differ in visual prominence from their context |
Proximity: nearby marks are perceived as a group
PROXIMITY
Definition: elements that are closer to one another are more likely to be perceived as belonging together.
- Application: smaller within-region gaps make the current-to-target comparison easiest.
Similarity: marks that share appearance are perceived as related
SIMILARITY
Definition: elements that share color, shape, size, or orientation are likely to be read as members of the same category or series.
| Segment | Q1 | Q2 | Q3 | Q4 | Q5 | Q6 | Q7 | Q8 |
|---|---|---|---|---|---|---|---|---|
| Enterprise | 48 | 52 | 55 | 57 | 61 | 65 | 69 | 76 |
| Mid-market | 46 | 49 | 51 | 54 | 56 | 59 | 63 | 66 |
| SMB | 44 | 45 | 48 | 49 | 51 | 54 | 55 | 58 |
| Consumer | 52 | 51 | 53 | 55 | 54 | 57 | 59 | 61 |
- Chart: repeated color links observations in a series.
- Table: repeated row shading helps the eye scan across columns without losing its place.
Enclosure: a boundary defines a set
ENCLOSURE
Definition: elements inside the same bounded region are perceived as a group, even when the elements themselves look alike.
- Application: the rectangle creates an analytical subset that was not explicit in the point encoding.
Connection: linked marks are perceived as related
CONNECTION
Definition: elements joined by a line or other connector are treated as parts of the same relationship or sequence.
- Application: the line says that adjacent observations belong to one ordered process.
Continuity: smooth paths and aligned edges are easier to follow
CONTINUITY
Definition: viewers tend to follow a smooth path or aligned edge rather than perceive abrupt changes in direction.
- Application: ordering the bars creates a continuous descending edge that makes rank easy to scan.
Closure: viewers complete an incomplete form
CLOSURE
Definition: when enough of a familiar boundary is visible, viewers mentally complete the missing parts.
- Application: the dashed bridge shows the path a viewer may infer; the label keeps the missing interval explicit.
Figure-ground: foreground marks separate from context
FIGURE–GROUND
Definition: viewers separate prominent elements as the figure while treating less prominent elements as background context.
- Application: muted context supports comparison without competing with the selected cases.
Cognition adds memory, conventions, and prior knowledge
| Cognitive resource | What the viewer must do | Design implication |
|---|---|---|
| Working memory | Retain a legend mapping or compare values that are far apart | Place labels near marks and align values on shared scales |
| Learned conventions | Interpret axes, reading direction, line connection, and familiar chart forms | Follow conventions unless departure serves a clear purpose |
| Prior knowledge | Supply domain meaning and expectations | State units, population, definitions, and analytical context |
- Perception determines what is seen first.
- Cognition determines how the viewer holds, interprets, and evaluates what was seen.
Direct labels reduce the viewer’s memory burden
- Direct labels place the series name beside the mark, reducing repeated legend lookup and color-memory matching.
We can only process a few things at once
- A display can contain a great deal of information while still making comparison and recall difficult.
We seek meaning and make connections, whether intended or not
- Similar movement invites a story even when the apparent relationship is coincidental.
We rely on conventions and metaphors
- Direction and spatial orientation carry meaning.
- Up often reads as better; down as worse.
- North usually appears at the top; time usually runs left to right.
- Color carries learned meaning.
- Red may indicate loss, danger, heat, or a political category.
- Darker values often suggest more, fuller, or more intense.
- Graphic forms imply relationships.
- A connecting line suggests sequence or continuity.
- Familiar chart forms lead viewers to anticipate particular comparisons.
Conventions reduce cognitive effort when they match the audience’s expectations. Their meanings can still vary across cultures and domains.
What’s wrong with this chart?
What’s wrong with this chart?
What’s wrong with this chart?
References
Cleveland, W. S., and McGill, R. (1984). “Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods.” Journal of the American Statistical Association, 79(387), 531-554. PDF
Few, S. Show Me the Numbers: Designing Tables and Graphs to Enlighten, Chapter 5. Local instructor reference.
Healy, K. Data Visualization: A Practical Introduction, Chapter 1, “Look at Data.” Chapter
Durham University. “Data Visualization, Lecture 3.” Lecture
Next: Bad practices in data visualization
The next lecture applies perception and task fit to common ways charts can create a misleading impression:
- inappropriate channels for the data or task
- truncated and reversed axes
- dual axes and incompatible scales
- misleading area and dimensional scaling
- chartjunk and unnecessary visual activity