Set up the static-site tech stack: Astro 5 with Markdown content collections, Vega-Lite specs rendered to static SVG at build time (zero client JS), plain scoped CSS, and a GitHub Pages deploy workflow. Includes three sample sins (truncated y-axis, dual-axis deception, pie chart overload), each with a bad and fixed chart spec, plus a gallery index and per-sin detail pages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8
1.1 KiB
title, summary, category, severity, tags, badChart, fixedChart, date
| title | summary | category | severity | tags | badChart | fixedChart | date | |||
|---|---|---|---|---|---|---|---|---|---|---|
| The Truncated Y-Axis | Chopping the baseline off a bar chart to make small differences look enormous. | Misleading Scales | 4 |
|
truncated-axis-bad | truncated-axis-fixed | 2026-08-05 |
The sin
Bar charts encode value with length. When you start the y-axis somewhere above zero, the bars no longer represent their true magnitudes — a jump from 92 to 98 (a ~6% change) can be drawn to look like a chart-topping surge. The reader compares bar heights and walks away with a wildly inflated sense of the trend.
Why it deceives
The eye reads the ratio of bar lengths, not the axis labels. Truncating the baseline breaks the contract between "twice as tall" and "twice as much." It is the single most common way an honest-looking bar chart tells a lie.
The repentance
Start bar charts at zero. Always. If the interesting variation is genuinely small and a zero baseline flattens it, that is a signal to switch encodings — use a line chart or a dot plot, where position (not length) carries the meaning and a non-zero range is legitimate.