Visual Encoding Hierarchy: Which Visual Channels People Read Most Accurately

People judge quantities most accurately from position along a common scale. Next come position along non-aligned scales, then length, direction (slope), and angle, then area, then volume and curvature, and last, shading and color saturation. That is Cleveland and McGill's 1984 ranking, and the practical rule that follows from it is simple: put the comparison that matters most on position against a shared axis, and push secondary variables down to size and color.

What is the visual encoding hierarchy?

The visual encoding hierarchy ranks visual channels by how accurately readers can decode a value from them. A channel is any property of a mark that can carry data: its position, length, angle, area, or color. Every chart is a set of decisions about which variable goes on which channel, and the hierarchy tells you which channels give readers the most accurate comparisons. The term usually refers to William Cleveland and Robert McGill's ranking of "elementary perceptual tasks," published in 1984 in the Journal of the American Statistical Association as "Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods."

What is the Cleveland and McGill ranking?

Cleveland and McGill ordered the elementary perceptual tasks from most to least accurate as shown below. Tasks that share a rank were grouped together in their ordering.

Rank	Elementary perceptual task	Where you see it
1	Position along a common scale	Dot plots, bar charts (bar ends against one axis), scatter plots, line charts
2	Position along non-aligned scales	Small multiples with identical scales, where each panel repeats the same axis
3	Length, direction (slope), angle	Upper segments of stacked bars, floating bars in waterfall and Gantt charts, slope charts, pie slices
4	Area	Bubble charts, treemaps, proportional symbol maps
5	Volume, curvature	3D bars and pictograms, judging change from how sharply a curve bends
6	Shading, color saturation	Choropleth maps, heatmaps

Position along a common scale wins because both values are read against the same axis, so the eye only has to compare two endpoints. Non-aligned scales add a step, since you have to carry a position from one panel to another. Length, slope, and angle judgments have no shared reference at all. Area and volume add a perceptual bias on top of that. Psychophysics research summarized by Stevens' power law finds that perceived area grows more slowly than actual area, and perceived volume grows more slowly still, so readers underestimate the difference between a large shape and a small one. Shading and saturation are hardest to read as numbers: readers can tell darker from lighter, but not by how much without checking a legend.

Keep the scope in mind. The ranking measures how accurately people judge magnitudes, such as "what percentage of this value is that one?" It does not tell you which feature grabs attention first. That is the job of preattentive attributes like color and enclosure, and they are covered by a separate body of research.

How did Cleveland and McGill test the ranking, and does it hold up?

Their own experiments tested position, length, and angle. Participants looked at two marked values in a bar chart, stacked (divided) bar chart, or pie chart and estimated what percentage the smaller value was of the larger. Position judgments were more accurate than both angle judgments (pie charts) and length judgments (segments of stacked bars). The rest of the ordering, covering area, volume, curvature, and shading, rests largely on earlier perception research and their reasoning about it rather than on new experiments of their own.

In 2010, Jeffrey Heer and Michael Bostock re-ran the position–angle and position–length experiments with crowdsourced participants on Amazon Mechanical Turk ("Crowdsourcing Graphical Perception: Using Mechanical Turk to Assess Visualization Design," CHI 2010). Their results matched the original ordering of position, length, and angle. They also ran new area experiments with rectangles, as in treemaps, and circles, as in bubble charts, and area judgments came out less accurate than position and length. So the ranking is a design rule backed by repeated experiments.

What are Bertin's visual variables?

Jacques Bertin's Sémiologie graphique (1967; English translation Semiology of Graphics, 1983) came earlier and laid theoretical groundwork that the later rankings draw on. Bertin described the two planar dimensions of the page (x and y position) plus six "retinal" variables a mark can vary: size, value (lightness), texture, color (hue), orientation, and shape. He did not rank them by measured accuracy. He classified them by what they can express: whether a variable groups similar marks (associative), lets the eye pick out one category at a glance (selective), shows order (ordered), or shows proportional quantities (quantitative).

Visual variable	What varies	Typical use today
Position (x, y)	Location on the page	The main comparison, for any type of data
Size	Length or area of the mark	Quantities, often as a secondary variable (bubble size)
Value	Lightness, from light to dark	Ordered data and sequential color scales
Texture	Fineness or pattern of a fill	Separating categories in print or grayscale (hatched fills)
Color (hue)	Red vs. blue vs. green at similar lightness	Categories with no inherent order
Orientation	Angle of a mark	Occasional category or direction cues (wind arrows)
Shape	Circle vs. square vs. triangle	Marker types for a few categories

Bertin's key point carries straight into modern practice. In his analysis, only the planar dimensions and size can express quantities, value can express order, and hue, orientation, and shape separate categories without implying any order. Using a variable beyond what it can express, such as hue for a quantity, forces the reader to decode the chart through the legend instead of seeing it directly.

How does Mackinlay rank channels for quantitative, ordinal, and nominal data?

Jock Mackinlay's 1986 paper "Automating the Design of Graphical Presentations of Relational Information" (ACM Transactions on Graphics) described APT, a program that generated charts automatically. To do that, Mackinlay extended Cleveland and McGill's list to three data types. The quantitative ranking builds on Cleveland and McGill's. The ordinal and nominal rankings were Mackinlay's own proposal, not the result of new perception experiments. Position ranks first for every type, but the rest of the order depends on what the data means.

Rank	Quantitative	Ordinal	Nominal
1	Position	Position	Position
2	Length	Density	Color hue
3	Angle	Color saturation	Texture
4	Slope	Color hue	Connection
5	Area	Texture	Containment
6	Volume	Connection	Density
7	Density	Containment	Color saturation

The table shows the top seven of the 13 channels in each of Mackinlay's lists. In his terms, "density" means lightness, or how dark a mark is. The pattern to remember: for nominal data, length, angle, slope, area, and volume sink to the bottom, because a bigger mark reads as "more" and would suggest an order the categories don't have. For ordinal data, lightness and saturation move up to just behind position because they read naturally as low-to-high.

Mackinlay also defined the two tests that turn these rankings into design decisions. Expressiveness: the encoding shows all the facts in the data and only those facts, so you never encode unordered categories with a channel that implies order. Effectiveness: among the expressive options, choose the one people decode most accurately, and give the most important variable the best channel. Tamara Munzner's Visualization Analysis and Design (2014) is a widely used modern synthesis of the same ideas. It separates magnitude channels for ordered data, led by position on a common scale, from identity channels for categories, led by spatial region and color hue.

How does the encoding hierarchy decide which chart to use?

Start from the reader's main comparison, not from the chart menu. Identify the one comparison the chart exists to support and put it on position along a common scale. Then give each remaining variable the best channel still available for its data type. Most standard chart advice follows directly from this rule.

Reader's main question	Channel for the key values	Use	Avoid
How do categories compare?	Position on a common scale	Sorted bar chart or dot plot	Pie with many similar slices, bubble grid
How do the parts of a whole compare with each other?	Position on a common scale	Bar chart of shares	Pie, donut, or treemap when parts are close in size
How does a value change over time?	Position (y) against time (x)	Line chart	Stacked area when individual series matter
What changed between two points in time?	Position, plus slope	Slope chart or dumbbell plot	Two side-by-side pies
How are two measures related?	Position on both axes	Scatter plot	Two separate bar charts
What about a third measure?	Area or lightness, as a secondary variable	Bubble chart or color-scaled scatter plot	Making the third measure the main message

This is why the classic advice to replace a pie chart with a sorted bar chart, covered in detail in pie chart alternatives, holds up so well: it moves the values from angle (rank 3) to position on a common scale (rank 1). It is also the reason bars are the default for category comparisons, as explained in when to use bar charts. For the full goal-first decision process, see how to choose the right chart type.

What does the hierarchy look like on real numbers?

Take five products with market shares of 24%, 22%, 20%, 18%, and 16%, which sum to 100%. The reader wants to know which product leads and by how much. The table shows what each encoding asks the reader to compare for the largest product (A, 24%) and the smallest (E, 16%). The true ratio is 1.5 (24 ÷ 16).

Encoding	What the reader compares for A vs. E	Visible difference
Position/length (bar chart, 10 px per point)	Bar ends at 240 px and 160 px from one baseline	80 px against a shared axis
Angle (pie chart, 3.6° per point)	Slices of 86.4° and 57.6° pointing in different directions	28.8°, with no common baseline
Area (bubbles, area proportional to value)	Circles with an area ratio of 1.5	Diameters differ by only about 22% (√1.5 ≈ 1.22)
Lightness (heatmap cells)	Two shades on a sequential scale	Readers can order them but need the legend to measure

The trouble shows up between neighbors. In the pie, each 2-point gap between adjacent products is just 7.2° (86.4°, 79.2°, 72°, 64.8°, 57.6°, summing to 360°), so ranking B, C, and D by eye is hard without labels. In the sorted bar chart, the same gaps are 20 px steps against one baseline, and you can see that E is about two-thirds of A (16 ÷ 24 ≈ 0.67) from bar lengths alone. In the bubble chart, a 1.5× difference shows up as circles whose diameters differ by about 22%, and readers tend to underestimate area differences on top of that. The data is identical in every version, and only the channel changed.

When is a lower-ranked encoding the right choice?

A lower-ranked encoding is fine when precise comparison isn't the reader's task, or when position is already taken. The ranking measures how accurately people judge magnitudes. It doesn't say every chart has to maximize that accuracy.

• Position is already used. On a map, x and y are geography, so the data has to go to lightness (a choropleth) or size (proportional symbols). If readers need exact rankings, add a sorted bar chart next to the map.
• Pattern over precision. A heatmap of 24 hours × 7 days (168 cells) shows when activity peaks. Nobody needs to read a single cell to the percent.
• Third and fourth variables. Once x and y are assigned, size and color are the channels left. Use them for secondary variables and label the values that matter.
• A simple part-to-whole question. A two- or three-slice pie answering "roughly what share?" works. The ranking matters when readers must compare slices of similar size.
• Emphasis rather than measurement. Color is the right tool for highlighting one series. It just shouldn't be the only carrier of the values.

What are the common mistakes when applying the encoding hierarchy?

Most mistakes come from giving the best channel to the wrong variable, or from choosing a channel that implies something the data doesn't say.

• Wasting position on a minor variable. A grid of bubbles where x and y are just row and column labels, and the metric readers care about is circle size, puts the key values at rank 4 when rank 1 was available.
• Reading every segment of a stacked bar as comparable. Only the bottom segment and the bar totals sit on a common baseline. The segments above are length judgments on shifting bases. If those segments matter, use grouped bars or small multiples.
• Scaling bubbles by radius. A value 4× larger gets 4× the radius and 16× the area. Scale area to the value, so the radius grows with the square root of the value.
• Adding 3D. Perspective and depth turn position and length judgments into volume and angle judgments, and the top of a 3D bar no longer lines up cleanly with the axis gridlines.
• Using a rainbow (hue) scale for quantities. Hue has no natural order, so readers have to check the legend for every value. Use a sequential lightness scale for ordered data.
• Using ordered channels for categories. Encoding unordered categories with size or lightness makes readers look for a ranking that isn't there. Use hue, shape, or separate panels instead.
• Treating the ranking as a law. It describes precise magnitude judgments. Don't throw out a choropleth or a two-slice pie when the reader's task doesn't need that precision.