April workshop bookings
Clay: 24 bookings out of 40 places, or 60% filled.
Printmaking: 36 bookings out of 80 places, or 45% filled.
Printmaking has more bookings. Clay has the higher filled share. Unmet requests are not supplied.
Lesson browserVisual design, typography, and information hierarchy lessonsPrevious: Make meaning survive beyond appearanceNext: Adapt layouts without losing the message
Visual design · Lesson 9
Match visual encodings to the comparison
Length, position, area, and color imply different relationships. A chart can contain correct numbers while suggesting the wrong comparison.
By the end: audit a chart's baseline, scale, units, and visual quantity before accepting its message.
Name the quantity that carries the data
A bar encodes magnitude by length from a baseline. A dot plot encodes value by position along an axis. A bubble can encode magnitude by area, but doubling its radius makes area four times as large. The mark's physical property matters; printing the right number beside a misleading shape does not remove the contradiction.
Choose an encoding that supports the question. A table supports exact lookup. Aligned positions support comparison on a common scale. A line chart suggests ordered progression, often time, so connecting unordered categories can imply a relation that is not present. Direct labels and accessible text should explain units and categories.
Decide which comparison the marks must preserve
Suppose a workshop report lists 24 bookings for clay and 36 for printmaking during April. These are constructed counts, not observations from a real studio. A reader might ask which workshop has more bookings, how many more it has, or how much larger its total is. Those questions use the same numbers but different arithmetic. Subtraction gives 12 additional bookings. Division gives 36 divided by 24, or 1.5 times as many. Before drawing, decide which of those relationships the visible marks should preserve.
In the horizontal bars below, both marks start at the same vertical line. Each booking contributes eight drawing units, so 24 bookings occupy 192 units and 36 occupy 288. The extra length is 96 units, which represents the difference of 12 bookings. Dividing both lengths by eight recovers the counts. Dividing 288 by 192 recovers the ratio of 1.5. A shared starting line and a shared conversion make both operations possible without changing the data or guessing separate scales.
The length preserves both difference and ratio
A position plot uses a different mechanism. Put a small dot at 24 and another at 36 on a common axis. Their separation still represents 12 bookings, but the dots themselves do not have lengths that represent the totals. Enlarging both dots would not increase the reported bookings if their centers stayed fixed. This distinction explains why a narrowed axis can resolve differences in a position plot without claiming that the visible length of each mark equals the total quantity being reported.
Compare the two drawings before reading their captions. Locate 24 and 36 in each, then identify exactly what remains fixed when you mentally replace 36 with 30. The longer bar would lose 48 drawing units. The second dot would move left by the same amount on the shared scale. Neither its diameter nor the first mark would need to change. This is a prediction about the specified geometry, not evidence that one reader will answer faster or that either chart is universally easier.
Exact lookup can justify a table instead of a chart. A booking coordinator who must copy both counts into a report needs the numbers themselves, not an estimate from an axis. The small comparison includes the same workshop names, period, and counts as the bars. It does not add a percentage or a ranking that the data did not contain. A chart and a table can also coexist, with the chart exposing a pattern and nearby text retaining exact values for copying or nonvisual access.
Positions for comparison, text for exact lookup
| Workshop | Bookings |
|---|---|
| Clay | 24 |
| Printmaking | 36 |
Now change the task without changing the facts. Ask whether either workshop exceeded a target of 30 April bookings. Clay is six below and printmaking is six above. A reference line at 30 would support that decision, while the total counts should remain available. Do not connect the workshop categories with a line simply to make the graphic look continuous. Clay and printmaking have no intermediate numerical category. A connecting slope would add an apparent progression that these two named categories do not establish.
Inspect the baseline
Two values, 50 and 60, have a ratio of 1.2. With zero-baseline bars their length ratio is also 1.2. If the baseline is moved to 40, their visible lengths represent 10 and 20, producing a ratio of two. The numbers remain 50 and 60, but the lengths now encode differences above 40 rather than total magnitudes.
The lab retains zero-baseline bars beside a selected truncated scale. It labels both baselines and endpoints. This is an intentionally questionable magnitude comparison, not a recommended chart. Truncated position axes can be useful for resolving small differences in a dot or line plot if clearly labeled; the need for a zero baseline is especially strong when length represents the quantity itself.
Reconstruct the scale before accepting a ratio
A chart needs a conversion between a numerical interval and a drawing interval. If an axis from zero to 100 occupies 400 drawing units, every numerical unit receives four drawing units. A value of 50 reaches 200 drawing units above zero, and a value of 60 reaches 240. The difference is 40 drawing units. Here the bar lengths represent whole quantities. Changing the drawing height would change both lengths together without changing their ratio or the difference expressed in data units.
Keep the drawing height at 400 but move its lower endpoint to 40. The numerical interval is now 60 units, so each unit receives about 6.667 drawing units. The visible part of 50 spans ten numerical units and occupies about 66.667 drawing units. The visible part of 60 spans twenty and occupies about 133.333. These lengths have a ratio of two. That statement is correct for the increments above 40, but it is false for the total quantities 50 and 60.
The same drawing interval can represent different amounts
Use the existing baseline lab to separate two changes that can otherwise be confused. Select the zero preset, then the baseline 40 preset, leaving the data unchanged. First read the endpoint labels. Next compare each bar with its own baseline, rather than with the bottom edge of the surrounding page. The zero reference remains available throughout. Both drawings have the same height, but that does not mean one screen centimeter represents the same numerical interval in both. Their printed axis ranges tell you otherwise.
Predict the baseline 45 state before selecting it. The visible numerical increments will be five and fifteen, so the longer mark should be three times the shorter one. Confirm that prediction against the displayed length ratio. Then return to baseline zero and explain why the actual value ratio never changed. Only the selected lower endpoint changed. This exploration demonstrates a geometric consequence of truncation under the lab's fixed values and upper endpoint. It does not measure how much any particular viewer would overestimate the difference.
A narrow position axis can answer a legitimate question about small differences. Consider two constructed readings, 98 and 99 units, where the task is to distinguish their locations rather than compare their total magnitudes. On an axis from 95 to 100, dots can mark those readings without drawing two large filled lengths from 95. The axis still needs its endpoints and units. If the task changes to asking whether one total is nearly twice the other, the ratio 99 divided by 98 is the relevant calculation.
A narrow position axis does not turn dots into totals
Check a claimed improvement by reconstructing the reported quantity. A change from 50 to 60 bookings is ten bookings, and ten divided by the original 50 is 0.2, or 20 percent. If the labels instead say 50 percent and 60 percent, subtraction gives ten percentage points. The relative increase is still 20 percent, but now the quantities are shares rather than booking counts. An axis label must identify that distinction. Identical bar shapes do not make counts, percentages, and percentage point differences interchangeable measures.
Inspect the relationship
Separate a value ratio from a truncated-length ratio
The second ratio compares amounts above 40, not the original values.
Keep the numbers while changing the implied length ratio
Value ratio B/A = 1.2; selected visible-length ratio = 2.
Separate area, radius, and the counted population
Circle size requires another conversion because a circle grows in two dimensions. Its area equals pi times its radius multiplied by itself. For comparisons, the common pi factor cancels. A circle with radius 20 has area proportional to 400. A circle with radius 30 has area proportional to 900. Dividing 900 by 400 gives 2.25. The radius grew by a factor of 1.5, but the area grew by a factor of 2.25. A label saying 1.5 does not change that geometry.
To represent the earlier counts of 24 and 36 with circle areas, begin with a radius of 40 drawing units for 24. The area multiplier must be 36 divided by 24, or 1.5. The radius multiplier must therefore be the square root of 1.5, about 1.225. Multiplying 40 by that factor gives about 48.99 drawing units. Using radius 60 instead would allocate 2.25 times the original area. The circles below expose both choices on the same radius scale so you can compare the actual shapes.
Cover the numerical labels and compare what the two treatments ask you to infer. In the area treatment, the second circle occupies one and a half times the first circle's area. In the radius treatment, its area is more than twice as large. Restore the labels and check the multipliers rather than treating your visual estimate as a measurement. That establishes a geometric mismatch, not a measured reader error rate.
Area scaling and radius scaling give different pictures
Even a geometrically faithful chart can answer the wrong substantive question. Suppose clay has 24 bookings from 40 available places and printmaking has 36 bookings from 80 places. Comparing totals favors printmaking. Comparing the proportion filled requires dividing each count by its own capacity. Clay fills 24 out of 40, which is 0.6 or 60 percent. Printmaking fills 36 out of 80, which is 0.45 or 45 percent. More bookings and a higher filled share identify different workshops because the denominators differ.
The capacity specimen preserves both the numerator and denominator next to each percentage. Read it in two passes. First choose the workshop with the most occupied places. Then choose the one with the highest occupancy share. The answers reverse without contradiction. Staffing decisions may need counts; unused capacity decisions may need shares. Neither question justifies hiding the other quantity when the reader needs it to understand why the rankings differ between these two comparisons.
A larger count can fill a smaller share
Clay
24 bookings / 40 places
60% filled
Printmaking
36 bookings / 80 places
45% filled
Rates need a matching time window as well as a population. Twenty four bookings in one week and 36 bookings in two weeks do not establish a higher weekly rate for the second workshop. Under a simple average, the first has 24 per week and the second 18 per week. That average does not describe daily fluctuations or repeat customers. Before interpreting a visual difference, name what was counted, what it was divided by, and the interval covered. Arithmetic cannot supply missing definitions or establish why the difference occurred.
Check context as well as marks
A change from 50% to 60% is ten percentage points and a 20% relative increase, not a 10% relative increase. Rates also need denominators and time periods. If the underlying counts are small or estimates uncertain, a precise-looking mark does not eliminate that uncertainty.
Removing decorative ink can help, but do not remove necessary units, provenance, uncertainty, or annotations. These constructed charts contain no survey or experimental observations. Their geometric deductions do not establish a universal ranking of chart styles or an empirical reading-speed advantage.
Build a chart explanation that survives without the picture
Start a chart explanation with a sentence that names the comparison and its scope. For the constructed booking example, say that April bookings were 24 for clay and 36 for printmaking. If capacity matters, add the corresponding totals of 40 and 80 available places. A reader can reconstruct counts and shares without estimating shapes. A title such as "Printmaking wins" would instead replace a precise claim with an undefined judgment.
Color can distinguish the workshop categories, but the category names must stay attached to their marks. In the direct label specimen, each bar has its workshop name and value on the same row. In the legend version, the same facts remain present but identifying a workshop requires matching a swatch to a separate key. Follow that lookup once with a finger or pointer without clicking anything. That extra mapping is not a measured delay or a universal objection to legends.
Compare direct labels with a separate legend
Separate legend
■ Clay
■ Printmaking
24 bookings
36 bookings
April · scale maximum 40
Direct labels
Clay: 24 bookings
Printmaking: 36 bookings
April · scale maximum 40
Imagine that both colored bars print as the same gray. The direct labels still identify the workshops, while a key that depends only on hue may stop resolving them. Different positions, shapes, or text can carry the distinction. This addresses use of color under WCAG 1.4.1, not every accessibility requirement for charts. Required graphical information also raises the separate non-text contrast question under 1.4.11. The relevant adjacent background and whether the graphic is necessary for understanding matter. Decorative marks do not all have identical requirements.
Chart text has its own contrast requirements under 1.4.3. A high contrast bar does not establish that its small label is readable. The text rule distinguishes ordinary and qualifying large text and includes exceptions, while the opaque sRGB ratio applies to a specified foreground and background pair. Use unrounded values when checking a threshold. Neither the chart's color roles nor a numerical ratio certifies the entire page. A nearby exact text alternative can preserve the values, but it should also explain the relationship the chart is meant to communicate.
Use the report pair below as a guided interpretation exercise. Before reading its explanation, answer which workshop has more bookings and which has higher occupancy. Then state the intermediate calculations aloud or write them down. Printmaking has twelve more bookings. Clay's filled share exceeds printmaking's by fifteen percentage points. Those are descriptive comparisons of the supplied numbers. They do not show that the workshop subject caused either result. Different capacities alone already explain why comparing totals and shares can produce different rankings without any error in the arithmetic.
Give the reader enough facts to reconstruct both answers
Finally, propose a revision for a reader deciding where to add places next month. Keep the April facts unchanged, but acknowledge what they cannot answer. Bookings may be limited by capacity, and neither count records unmet requests, cancellations, or future demand. The supplied report can show utilization; it cannot prove how many extra places would be taken. A defensible chart explanation separates the pattern it displays from a decision that needs additional evidence. Changing the drawing cannot repair a missing denominator, an unknown population, or an unsupported causal claim.
Exercises
Diagnose a truncated bar claim
Values are 80 and 90, and bars begin at 70. Compare the value ratio with the visible-length ratio.
Hint
Subtract the baseline only for the drawn lengths.
Worked answer
| Comparison | Ratio |
|---|---|
| Actual values | 90 / 80 = 1.125 |
| Lengths above 70 | 20 / 10 = 2 |
The values have ratio 90/80 = 1.125. The visible lengths represent 20 and 10, so their ratio is two. The chart exaggerates the total-magnitude ratio if the reader interprets those lengths as the full values. Show a zero baseline for magnitude bars or use clearly labeled position marks for the narrower range.
Fix a bubble scale
A value doubles and a bubble's radius doubles. Has its area doubled? What radius multiplier would double the area?
Hint
Circle area is proportional to radius squared.
Worked answer
| Radius multiplier | Area multiplier |
|---|---|
| 2 | 4 |
| √2 ≈ 1.414 | 2 |
The area has quadrupled. To double area, multiply radius by the square root of two, about 1.414. Keep the legend explicit about whether area or radius carries value. Also supply direct values or a table because visually estimating areas is not exact arithmetic.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.
- W3C: Understanding non-text contrast
Contrast of required component and graphic information against adjacent colors, with stated exceptions.
- W3C: Understanding use of color
Color must not be the only visual means of communicating information. This is separate from luminance contrast.