Topic 2.5
Honest and Misleading Charts
In one line
A chart can be built from correct numbers and still mislead: a cut axis on bars, two y axes, circles sized by radius, a hand-picked time window, totals instead of rates, uneven bins, a rainbow colour scale. Learn to spot each one, measure how much it lies, and fix it.
Think of it like this
A photo cropped to leave out the crowd. Every pixel in the photo is real, yet it says "the stadium was packed" or "the stadium was empty" depending on where you cut. A chart is also a frame around the data, and the frame is a choice. Honest charts choose it so the picture matches the facts.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- baseline
- The value a bar starts from. For bars it must be zero.
- lie factor
- How big the effect looks in the picture divided by how big it is in the data. 1 is honest.
- dual axis
- A chart with one y axis on the left and another, with different units, on the right.
- cherry-picking
- Showing only the window or the items that support one story.
- per-capita (rate)
- A value divided by size (rides per dock, per person), so big and small things compare fairly.
- bin
- A range of values counted together in a histogram, such as trips of 10 to 15 minutes.
- density
- A bin's count divided by the bin's width, so wide and narrow bins compare fairly.
- rainbow scale
- A colour scale that cycles through all hues. It has no clear order and exaggerates boundaries.
Step by step
01A chart that exaggerates
The stage on the right starts with a chart a colleague drew for the board: summer months as bars with a gradient fill, the y axis starting at 100,000 and a headline that says "Rides explode in July". The numbers are correct.
02Start the bars at zero
The same bars from zero. July is a little taller than June, which is the truth: 9.4% more rides. The drama is gone, because there was no drama in the data.
03Remove decoration, add the numbers
Flat colour instead of a gradient, no heavy outline, and the real value above each bar. Gradients and outlines add ink without adding information, and the value labels let readers check the picture against the number.
04Write a headline that matches the data
The headline now says what the bars show: July was the busiest month, 9% above June. A title is a claim; it must be true of the picture.
05Show the whole year for context
Three summer bars can still mislead by leaving out the winter. All twelve months, summer in the accent colour, show where July sits: the peak of a smooth season, not an explosion.
Try it yourself
- 1
Cut the bars somewhere else
In the first live example, change
(v - 100000) / 18000(it appears twice, inyand inheight) in the A bars to(v - 90000) / 28000, and change both100000s in theconst shownline to90000. The cut bars now show July 1.57 times as long as June and the Console printslie factor 6.1. The cut is a free choice, and every choice gives a different (wrong) ratio. - 2
Divide each bin by its width
In the last live example, add
console.log("density, trips per minute:", merged.map(([lo, hi, n]) => lo + "-" + hi + " " + (n / (hi - lo)).toFixed(1)).join(" | "));before the last line. The Console printsdensity, trips per minute: 0-5 39.0 | 5-10 286.2 | 10-15 449.6 | 15-20 474.2 | 20-55 107.3. Per minute, the wide 20-55 bin is far below the 15-20 bin. Draw bar height = density and the left chart tells the truth. - 3
Check the staged chart
In the first stage step, change
startfrom100000to0andceilingto120000. You have made step 2 by hand: the exaggeration disappears, and with it the headline's claim.
Code & diagrams
A and C use the same numbers: a cut axis on bars lies, a trimmed axis on a labelled line does not. In D, the rainbow strip's neighbouring months look unrelated, while the one-hue strip reads as an ordered scale.
Preview
Console
Nothing logged yet.Expected console output
cut bars show July 2.31x June; data: 1.09x; lie factor 14.0
zero-based bars lie factor: 1.0
total of the 12 months: 933651Try it: interactive
Dual axes: same data, two stories
Switch the right-hand axis range and watch rides and temperature appear to move together, diverge, or cross. The data never changes.
The shaded window is what a "rides collapsed 90%" headline would show. The full line shows one day, an app outage (14 August), and a normal day after it.
Preview
Console
Nothing logged yet.Expected console output
window 18 Jul to 14 Aug: 4380 -> 439 (-90%)
the next day, 15 Aug: 4138 (-6% vs 18 Jul)
average day of the year: 2558 | days below half of that: 22The left histogram merges everything over 20 minutes into one wide bar, so it looks like the peak. The right one uses equal bins and shows the real peak at 15 to 20 minutes. Dividing each count by its bin width (density) fixes the left one too.
Preview
Console
Nothing logged yet.Expected console output
ranked by total rides: Quay, Lantern, Library, Clock Tower, Mill
ranked by rides per dock: Quay 4882, Mill 3516, Library 3471, Lantern 2905, Clock Tower 1736
a row with 0 docks: 100 rides / 0 = Infinity | 0 rides / 0 = NaN
tallest bar in the unequal chart: 20-55 minutes
tallest by density (count per minute): 15-20 minutes
trips counted: 10000 = 10000Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Divide by zero docks
In the last example, change docks: 12 for Quay to docks: 0 and look at the ranking by rides per dock.
Myth vs fact
Myth
If the numbers are right, the chart is honest.
Fact
The cut bars in the first example use correct numbers and give a lie factor of about 14. The frame (axis start, window, scale, bin widths) is part of the claim.
Myth
Starting the axis at zero is always required.
Fact
Only for bars and areas, where length or size is the data. A line or dot plot may use a trimmed axis if the ticks are labelled.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Tufte's lie factor assumes you can measure "size of effect" in the picture (length, area). For 3D or perspective charts there is no single honest measurement, which is why 3D bars and pies are never recommended for comparing values.
- ▸
Area charts (a line with a filled region) read like bars: the filled size is the data, so they also need a zero baseline. A stacked area is worse: only the bottom layer has a common baseline, the others float and are hard to compare.
Remember this
- 1
The problem this solves: nobody needs to lie on purpose for a chart to mislead. A default axis range, an automatic colour scale or a quick pie can exaggerate a small change or hide a big one. The reader trusts the picture. Your job is to make the picture and the numbers say the same thing.
- 2
Measure the lie. Edward Tufte's lie factor is the size of the effect shown in the picture divided by the size of the effect in the data. An honest chart has a lie factor near 1. A bar chart of Lumen's June (107,712 rides) and July (117,803 rides) with the axis cut at 100,000 shows July's bar 2.3 times as long as June's; the data says 1.09. The effect shown is 131% and the real effect is 9.4%, a lie factor of about 14.
- 3
Bars must start at zero, lines and dots need not. Bar length is read as a ratio, so a cut baseline changes the story. A line or dot plot is read by position against labelled ticks, so a trimmed y axis is fine, and often best: temperature that moves between 10 and 25 °C should not be crushed into a strip at the top of a 0 to 100 axis. The rule is: if the reader compares lengths, start at zero; if they compare positions, label the axis clearly.
- 4
Dual axes give one line the left axis and another the right. You can then rescale one axis until the lines overlap or diverge, and the crossing point means nothing. The data (rides and temperature are correlated at 0.84) never changed. Prefer two charts stacked with a shared time axis, or index both to 100 at the start.
- 5
Cherry-picked windows, totals instead of rates, and uneven bins. Show 18 July to 14 August only and rides "fell 90%"; the whole year shows one outage day. Total rides per station ranks big stations first; rides per dock ranks efficient ones first (Quay's 12 docks carried 4,882 rides each, Clock Tower's 30 carried 1,736). A histogram with bins of different widths and bar height = count makes the wide bin look like the peak.
- 6
3D, radius-sized circles and rainbows. A 3D bar's top is tilted, so its height and its real value are both hard to read. A circle sized by radius (Topic 2.2) squares the difference. A rainbow colour scale has no natural order and hides the middle of the data behind bright bands; use one hue from light to dark for amounts and two hues meeting at a neutral for values above and below a centre (Topic 10.1).
- 7
How to spot a bad chart. Check, in order: does the axis start at zero (bars)? Are the units and period stated? Is the scale the same across panels? Is the window the whole story? Could the title be read opposite from the data? Does any single mark's size follow the area it should? Then ask who drew it and what they wanted you to believe. And when you draw one, put the data's source and the date on it.
Explain it without notes
Why must a bar chart start at zero but a line chart need not?
What is a lie factor? Compute it for June and July with the axis cut at 100,000.
Why can a dual-axis chart mislead even if both axes are labelled?
What is wrong with a histogram whose bins have different widths and whose bar height is the count?
Practice
Write lieFactor(shownA, shownB, trueA, trueB) that returns (shown effect ÷ true effect), using effect = (B − A) ÷ A. Return NaN when the true effect is zero. Check it with the June and July example: shown lengths 7,712 and 17,803, true 107,712 and 117,803.
A chart shows 12 months of rides with the y axis starting at 40,000. Is that honest for bars? For a line?
Trade-offs
- ↔
A zero baseline keeps bars honest but can make a small, real change hard to see. Use a line or dot plot with a labelled trimmed axis, or label the change directly ("+9%") instead of cutting the bars.
- ↔
Rates remove size effects but hide volume. Show the rate for the ranking and the total in the label.
Done when you can
I start bar and area charts at zero and label trimmed axes on lines.
I can compute a lie factor and say what it tells me.
I avoid dual axes, 3D charts and rainbow colour scales for amounts.
I check the time window, the denominator and the bin widths before I trust a chart.
I write headlines that are true of the picture and name the source and period.