From 18e7f30b2d4e475fd7e1f347f5c9efdcc192d9d8 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 5 Aug 2026 17:16:45 +0000 Subject: [PATCH] Condemn uses, not chart types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The pie page argued the form was the problem ("asks the reader to compare angles") and then conceded a narrow exception; the dual-axis page named the form in its title and rated it severity 5. Both read as blanket bans, which is not the position — and blanket bans are how dataviz advice turns into the folklore we're trying to replace with citations. The pie page now says outright that the chart type isn't the sin, the workload is, and keeps the pie for the job it does well. The dual-axis page is retitled for the actual misuse, drops to severity 4, and gains a section on when a second axis is legitimate — the test being whether you chose the alignment yourself. Adds a severity rubric to CLAUDE.md so this stays consistent: 5 is reserved for charts with no honest reading, and a form with legitimate uses caps at 4. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM --- CLAUDE.md | 13 +++++ docs/content-backlog.md | 37 ++++++++----- src/content/sins/dual-axis-correlation.md | 67 +++++++++++++++++++++++ src/content/sins/too-many-pie-slices.md | 33 ++++++++--- src/content/sins/two-y-axes.md | 44 --------------- src/lib/references.ts | 4 +- src/pages/index.astro | 2 +- 7 files changed, 129 insertions(+), 71 deletions(-) create mode 100644 src/content/sins/dual-axis-correlation.md delete mode 100644 src/content/sins/two-y-axes.md diff --git a/CLAUDE.md b/CLAUDE.md index 25e9635..928a2e9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -24,6 +24,19 @@ Each sin page follows one shape: **poke → proof → why → the fix → receip "Your bars don't start at zero…", not the numbers from our example data. - **Tone: cheeky, not moralizing.** "Caught — here are the receipts," not "repent." Poke the mistake, keep it light. +- **We condemn uses, not chart types.** There is no banned form here. A pie + chart showing three parts of a whole is doing its job; a second y-axis + carrying °C against °F is fine. The sin is always a *use* — the workload the + form can't carry, the alignment you picked yourself, the baseline you moved. + Say so on the page when the form has honest uses, so nobody reads us as + "pie charts are always wrong." Blanket bans are how dataviz advice turns into + folklore, and folklore is what we're trying to replace with citations. +- **Severity means something.** Keep it consistent: + **5** — reverses or fabricates meaning; no honest reading of the chart exists. + **4** — actively misleads about magnitude or relationship, but the underlying + form has legitimate uses. **3** — a sound form asked to do a job it can't; the + reader can't extract what the chart claims to show. **2** — craft failure: + nothing false, but the reader is made to work for no reason. - **Same numbers, both charts.** The bad and fixed charts must share one dataset so the page *proves* dishonest-vs-honest by construction. Charts are authored as Vega-Lite specs and rendered at build time — never screenshots. diff --git a/docs/content-backlog.md b/docs/content-backlog.md index ece9d7d..f68e2ad 100644 --- a/docs/content-backlog.md +++ b/docs/content-backlog.md @@ -27,28 +27,28 @@ seven sources, give it seven and add whatever's missing to the file. | Reference | Cited by | | --- | --- | -| `munzner` | — | -| `healy` | — | -| `schwabish` | — | | `ftvisvocab` | — | -| `tufte` | truncated-y-axis | -| `huff` | truncated-y-axis | -| `swd` | two-y-axes | -| `spurious` | two-y-axes | -| `datawrapper` | two-y-axes | +| `healy` | — | +| `munzner` | — | +| `schwabish` | — | +| `datawrapper` | dual-axis-correlation | | `fewpies` | too-many-pie-slices | -| `showmenumbers` | too-many-pie-slices | +| `huff` | truncated-y-axis | | `shapeparameter` | aspect-ratio | +| `showmenumbers` | too-many-pie-slices | +| `spurious` | dual-axis-correlation | +| `swd` | dual-axis-correlation | +| `tufte` | truncated-y-axis | | `vizwtf` | inverted-y-axis | -| `wilke` | too-many-pie-slices, truncated-y-axis | -| `truthfulart` | aspect-ratio, two-y-axes | | `callingbullshit` | inverted-y-axis, truncated-y-axis | -| `economistmistakes` | inverted-y-axis, truncated-y-axis | -| `datatoviz` | too-many-pie-slices, two-y-axes | -| `junkcharts` | inverted-y-axis, too-many-pie-slices | +| `datatoviz` | dual-axis-correlation, too-many-pie-slices | | `eagereyes` | aspect-ratio, too-many-pie-slices | +| `economistmistakes` | inverted-y-axis, truncated-y-axis | +| `junkcharts` | inverted-y-axis, too-many-pie-slices | +| `truthfulart` | aspect-ratio, dual-axis-correlation | +| `wilke` | too-many-pie-slices, truncated-y-axis | | `clevelandmcgill` | aspect-ratio, too-many-pie-slices, truncated-y-axis | -| `howchartslie` | aspect-ratio, inverted-y-axis, truncated-y-axis, two-y-axes | +| `howchartslie` | aspect-ratio, dual-axis-correlation, inverted-y-axis, truncated-y-axis | The citation lists in each entry below are **starting points, not budgets** — add to them while drafting. @@ -198,6 +198,13 @@ rediscovering them: ## Conventions reminder +Note what the two pie entries above do and don't say. Neither condemns the pie +chart — both condemn feeding one data that has no whole to divide. Same for a +second y-axis: the form is fine, the manufactured correlation is not. We don't +ban chart types here, and a backlog entry that reads like a blanket ban has been +written wrong. See the severity rubric in `CLAUDE.md` — a form with legitimate +uses caps out at 4. + Anything picked up from this list still follows `CLAUDE.md`: the title names the problem plainly and leaves the wit to the poke, the poke names the general sin and never our sample's numbers, both charts share one dataset, and the fixed diff --git a/src/content/sins/dual-axis-correlation.md b/src/content/sins/dual-axis-correlation.md new file mode 100644 index 0000000..783e81e --- /dev/null +++ b/src/content/sins/dual-axis-correlation.md @@ -0,0 +1,67 @@ +--- +title: "Two Y-Axes Scaled to Imply a Correlation" +summary: "Two unrelated series, each handed its own scale, until the lines trace the same suggestive path." +poke: "Two scales, tuned until the lines overlap — and suddenly anything 'causes' anything." +category: "False Relationships" +severity: 4 +tags: ["dual axis", "correlation", "line chart"] +badChart: "dual-axis-bad" +fixedChart: "dual-axis-fixed" +date: 2026-08-05 +citations: + - key: datatoviz + note: "Lists “using two Y axes” as a top caveat — a way to manipulate the story." + - key: spurious + note: "Thousands of nonsense correlations: proof that “they move together” proves nothing." + - key: howchartslie + note: "Cairo on how aligned axes manufacture relationships that aren’t there." + - key: swd + note: "Knaflic’s standing advice: avoid the second axis; separate or index instead." + - key: datawrapper + note: "“Why not to use two axes, and what to use instead” walks through why the two scales' proportions are arbitrary — and they've since published second thoughts, which is worth reading too." + - key: truthfulart + note: "Cairo on what a chart owes its reader, which is the standard this one fails." +--- + +## The sin + +Put two *unrelated* series on one plot with two independent y-axes and you can +make anything look correlated. Slide the scales until the lines overlap and the +reader's brain does the rest: "these move together, so one must cause the other." + +Note what's being condemned. A second axis is a tool, and the sin is one +particular use of it — the one where the alignment is yours to choose and you +chose the flattering one. + +## Why it deceives + +With independent axes, the vertical position of each line is arbitrary — you +chose it. Overlapping lines imply a relationship that exists only because you +tuned two scales to coincide. Ice cream sales and shark attacks both rise in +summer; neither causes the other. The shared season is the hidden variable. + +## When a second axis is fine + +It isn't automatically dishonest, and this is why the severity here isn't a 5. + +A second axis is legitimate when both axes describe **the same quantity** — +°C and °F, millimetres and inches, a count and that same count as a share of the +total. The mapping between the two scales is fixed by arithmetic, so there's +nothing for you to tune and nothing for the reader to be misled about. Some +practitioners avoid the second axis even then, as a matter of house style; that +is a preference, not a rule, and it's not what this page is about. + +The line is whether *you* picked the alignment. If sliding one scale would +change the story, you're on the wrong side of it. + +## The repentance + +Don't force two different quantities into one coordinate space to imply a link. +Show them in **separate, stacked panels** with honest zero-based scales, as +above — the seasonal shape is still perfectly visible, it just no longer poses +as causation. + +If you genuinely want to argue the two move together, plot one **against** the +other in a scatter plot and let the reader judge the strength of it. And if +they're on wildly different scales but you want the shapes compared, index both +to a common base period so a shared axis becomes meaningful. diff --git a/src/content/sins/too-many-pie-slices.md b/src/content/sins/too-many-pie-slices.md index 9b9abc5..8e6aadb 100644 --- a/src/content/sins/too-many-pie-slices.md +++ b/src/content/sins/too-many-pie-slices.md @@ -20,17 +20,23 @@ citations: - key: wilke note: "His chapter on proportions puts the same data in a pie, a stacked bar and side-by-side bars, so you can see what each one costs you." - key: eagereyes - note: "Kosara has actually run the experiments, and complicates the blanket condemnation — read him before swearing off pies entirely." + note: "Kosara has actually run the experiments, and they don't support treating the pie as broken by nature — useful if someone tells you the chart type itself is the problem." - key: showmenumbers note: "Few’s full design manual, for when the short broadside isn’t enough to win the argument." --- ## The sin -The pie chart asks the reader to compare **angles** — something people are -genuinely bad at. One or two slices, fine. But eight slices, several of them -within a percentage point of each other? Nobody can tell whether Firefox beats -Samsung by eyeballing two thin wedges on opposite sides of the circle. +A pie chart does one job, and does it well: showing that a handful of parts make +up a whole — this slice is about half, that one about a quarter. Nothing else +communicates "most of it" quite as fast. + +Eight slices, several within a percentage point of each other, is not that job. +Nobody can tell whether Firefox beats Samsung by eyeballing two thin wedges on +opposite sides of the circle. + +**The chart type isn't the sin here — the workload is.** Pies are not banned +around here; this one was just asked to answer a question it can't answer. ## Why it deceives @@ -39,9 +45,18 @@ circle can't be lined up against a common baseline. The small categories blur into an indistinguishable fringe, and the ranking — usually the whole point — becomes guesswork. +Worse, the reader doesn't feel like they're guessing. The chart looks exact, so +a rank read off it gets quoted with a confidence nothing on the page earns. + ## The repentance -Use a **sorted horizontal bar chart**. Every value shares one baseline, the -ordering is explicit, and long labels sit comfortably beside their bars. Reserve -the pie for the rare case of two or three parts of an obvious whole — and even -then, a bar chart rarely does worse. +Match the form to the question you're actually asking. + +If the point is "these few parts make up the whole," a pie with two or three +slices says it instantly, and you should keep it. If the point is a **ranking** +— which is what an eight-category breakdown nearly always is — use a sorted +horizontal bar chart: one shared baseline, explicit order, and room for long +labels beside their bars. + +If you need the whole *and* the ranking, a sorted bar chart with the total +stated in the title does both. diff --git a/src/content/sins/two-y-axes.md b/src/content/sins/two-y-axes.md deleted file mode 100644 index 2d028ff..0000000 --- a/src/content/sins/two-y-axes.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: "Two Y-Axes on One Chart" -summary: "Two unrelated series, each handed its own scale, until the lines trace the same suggestive path." -poke: "Two scales, tuned until the lines overlap — and suddenly anything 'causes' anything." -category: "False Relationships" -severity: 5 -tags: ["dual axis", "correlation", "line chart"] -badChart: "dual-axis-bad" -fixedChart: "dual-axis-fixed" -date: 2026-08-05 -citations: - - key: datatoviz - note: "Lists “using two Y axes” as a top caveat — a way to manipulate the story." - - key: spurious - note: "Thousands of nonsense correlations: proof that “they move together” proves nothing." - - key: howchartslie - note: "Cairo on how aligned axes manufacture relationships that aren’t there." - - key: swd - note: "Knaflic’s standing advice: avoid the second axis; separate or index instead." - - key: datawrapper - note: "“Why not to use two axes, and what to use instead” walks through why the two scales' proportions are arbitrary — and they've since published second thoughts, which is worth reading too." - - key: truthfulart - note: "Cairo on what a chart owes its reader, which is the standard this one fails." ---- - -## The sin - -Put two series on the same plot with two independent y-axes and you can make -*anything* look correlated. Slide the scales until the lines overlap and the -reader's brain does the rest: "these move together, so one must cause the other." - -## Why it deceives - -With independent axes, the vertical position of each line is arbitrary — you -chose it. Overlapping lines imply a relationship that exists only because you -tuned two scales to coincide. Ice cream sales and shark attacks both rise in -summer; neither causes the other. The shared season is the hidden variable. - -## The repentance - -Don't force two series into one coordinate space just to imply a link. Show them -in **separate, stacked panels** with honest zero-based scales. If you truly want -to argue they move together, plot one **against** the other (a scatter plot) and -let the reader judge the relationship — don't manufacture it with axis scaling. diff --git a/src/lib/references.ts b/src/lib/references.ts index 326afe1..af5a7cf 100644 --- a/src/lib/references.ts +++ b/src/lib/references.ts @@ -89,7 +89,7 @@ export const REFERENCES = { year: 2007, url: 'https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf', kind: 'paper', - blurb: 'The definitive takedown of the pie chart, from the field’s most stubborn advocate for clarity.', + blurb: 'The best-known case against the pie chart, argued at length by the field’s most stubborn advocate for clarity.', free: true, }, wilke: { @@ -200,7 +200,7 @@ export const REFERENCES = { work: 'tylervigen.com', url: 'https://www.tylervigen.com/spurious-correlations', kind: 'site', - blurb: 'Thousands of nonsense correlations — the canonical proof that “they move together” proves nothing.', + blurb: 'Thousands of nonsense correlations — the definitive proof that “they move together” proves nothing.', free: true, }, eagereyes: { diff --git a/src/pages/index.astro b/src/pages/index.astro index e433dbe..c41be46 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -18,7 +18,7 @@ const sins = (await getCollection('sins', ({ data }) => !data.draft)).sort((a, b

Don’t type the whole explanation for the hundredth time — send the link. Each sin shows the deceptive chart beside its honest twin, names the tell, - and cites the giants who back you up. + and cites the people who already made the case.