Visual Encodings: How Marks Convey Values
Match the channel to the data type
Encodings map data to visual channels: position, length, area, color, shape. Choosing the right channel for the data type decides whether the chart is honest or misleading.
What you will learn
- Rank visual channels by accuracy (position > length > angle > area...)
- Pick channels appropriate to nominal, ordinal and quantitative data
- Spot misleading encodings before users do
What is this?
Visual encodings are the marks — position, length, angle, area, color, shape, size — through which data values become visible. Humans read position and length precisely, angles roughly, area worse, and color-hue not at all for magnitude. Matching channel accuracy to the question is the entire craft of honest charts.
Why do you need it?
- A wrong-channel chart (e.g. 3D pies, size-as-value) misleads decisions.
- Knowing channel ranks lets you defend chart choices in design reviews.
- Color misuse (rainbow gradients) is the most common production mistake.
- It's the systematic theory behind 'why a bar over a pie over a treemap'.
Mental model
A ruler vs blurry binoculars
Position/length vs area/color
A ruler reads 100mm exactly; binoculars tell you an object is 'bigger' but not by how much. Position and length are the ruler; area and color-shade are the binoculars. Precision matters when the decision hangs on the size of the difference — use a ruler-channel.
How it works
- Position (x/y axes) and length are the highest-accuracy channels.
- Angle is decent for parts-of-a-whole; area and volume degrade accuracy further.
- Color hue differentiates categories; saturation/lightness shows intensity.
- Shape identifies discrete items but never encodes quantity.
- Dual encodings (size + color) express two dimensions only if each is chosen for its channels.
Channel accuracy hierarchy for quantitative data.
Examples
Same data, two channel-faithful options
DATA: Revenue by region, Q1-Q3. GOOD encoding (position/length): Grouped bar: region on x, revenue length on y. Adds a line marking the plan. WEAK encoding (area): Bubble chart sized by revenue — reads variance only roughly (area ~ squared difference). RULE: when the difference size matters, bars beat bubbles.Length encodes exact differences; area squashes them. The plan line turns a chart into a decision.
In production
- Regional variance is a bar chart with a plan line — precise deltas, not bubbles.
- Category proportions use horizontal bars instead of pie for label legibility.
- A heatmap uses saturation for magnitude only after position does the grouping.
Best practices
- Default to position/length/angle before area/color for quantities.
- Keep color for status and categories, not magnitude grading.
- Start axes at zero for length-based charts (honesty about baseline).
- Annotate exact values where precision is decision-critical.
Common mistakes
- Truncated y-axis exaggerating tiny differences.
- 3D effects, paddles and multi-color pies adding noise.
- Rainbow sequential scales — gradient of hues, not of light.
- Using bubicle size to encode small vs large differences people need to compare.
Debugging tips
- Chart chosen for data that fails the 'glance' → the channel accuracy is too low for the claim.
- Reviewers misread size → cite the encoding rank and switch to bars/length.
- Colors washing out → switch from hue-gradients to light/dark of one hue.
Interview checkpoint
Hands-on lab
- Compute data where chart-type choice changes the impression
- Demonstrate the truncated-axis effect numerically
- Derive when bars beat bubbles from the deltas
Rank Channels with Data, Not Intuition
40 min · intermediate
Quick quiz
Which channel do humans read with the HIGHEST accuracy?
Color hue is a reliable way to encode magnitude differences.