tufte-viz — Pre/Post Demo Reference¶
Four worked examples of how the tufte-viz skill transforms a visualization. Each demo is a single HTML page showing the default ("pre") and Tufte-treatment ("post") side by side.
Core insight: The skill produces cleaner, more information-dense visualizations by applying Tufte's eraser test, maximizing data-ink ratio, using small multiples, and preserving all relevant data — never destroying information to achieve aesthetics.
Demo 1 — NASA GISS Temperature Anomalies by Latitude Band (1880–2025)¶
URL: https://aparente.github.io/claude-skills/skills/tufte-viz/demos/giss-temperature.html
Before (default): Rainbow lines on a shared grid — multiple latitude bands plotted with color-coded lines against a standard grid, with a legend decoding the colors.
After (Tufte treatment): Small multiples with range frames, layered global-average underlay, direct labeling.
What changed:
- Small multiples: one panel per latitude band, same axes, enabling direct comparison across zones
- Range frames: axis spans only the data range (not arbitrary round numbers), saving ink and conveying the actual extent
- Global average underlay: a single layer showing the global mean overlaid on all panels simultaneously — reveals polar amplification at a glance
- Direct labeling: labels placed directly on the data rather than in a separate legend — eliminates the legend completely
Insight revealed: The polar amplification signal — that higher latitudes are warming faster than the global mean — becomes visually undeniable when the latitude bands are separated into small multiples and the global underlay is visible in every panel.
Demo 2 — Kyoto Cherry Blossom Full-Bloom Dates, 812–2015 CE¶
URL: https://aparente.github.io/claude-skills/skills/tufte-viz/demos/kyoto-sakura.html
Before (default): A connected line chart showing full-bloom date over time — the kind of default output you'd get from plotting the data with a line chart function.
After (Tufte treatment): Dot scatter with running median, inverted y-axis (warmer = up), climate-epoch bands.
What changed:
- Dot scatter replaces line: individual data points visible; overplotting reduced; variability around the trend is now apparent
- Running median: smooth trend line through the noise — shows the actual long-term drift without fitting a parametric model
- Inverted y-axis: warmer temperatures → higher on the chart (ecological intuition — warmer is "more", so it's up). This makes the modern warming signature visually coherent with the spatial metaphor of temperature
- Climate-epoch bands: vertical banding marking known climate epochs (Medieval Warm Period, Little Ice Age, Modern Warming) so the eye can see the phenological record in historical context
Insight revealed: The modern anthropogenic warming signal emerges from 1,200 years of phenological noise. With the y-axis inverted and epoch bands overlaid, the post-1980 acceleration reads as visually dramatic — not because the data was exaggerated, but because the design finally lets it speak.
Demo 3 — Royal Greenwich Observatory Sunspot Areas by Latitude (1874–2013): The Maunder Butterfly¶
URL: https://aparente.github.io/claude-skills/skills/tufte-viz/demos/sunspot-butterfly.html
Before (default): Five aggregated lines — presumably sunspot area plotted over time as separate series (perhaps by latitude zone) using standard line chart defaults.
After (Tufte treatment): Maunder butterfly heatmap preserving all 93,000 data cells.
What changed:
- Heatmap replaces lines: latitude × time becomes a density field — the classic "Maunder butterfly" pattern (sunspots appear at high latitudes early in a cycle, migrate toward the equator as the cycle progresses)
- 93,000 cells preserved: no aggregation, no binning, no smoothing — every observation contributes to the image
- Full data density: the migration pattern within each ~11-year cycle becomes visible in a way that aggregated lines obscure entirely
Insight revealed: Edward Tufte's butterfly diagram (the actual name for this pattern, not to be confused with the unrelated butterfly chart) encodes a fundamental heliophysics fact: sunspot latitude drift follows the Hale cycle. Preserving the raw data density makes this physics legible in a way that line chart aggregation cannot.
Demo 4 — Sunspots, Austere vs Beautiful (Iridescent Ridgeline)¶
URL: https://aparente.github.io/claude-skills/skills/tufte-viz/demos/sunspot-pretty.html
Before (default): Tufte-austere monochrome heatmap — maximum data-ink, minimal color, pure function.
After (Tufte treatment): Iridescent blue ridgeline that preserves every Tufte invariant while gaining emotional reach.
What changed:
- Color added: an iridescent blue palette replaces grayscale — the aesthetic register shifts from scientific austerity to something approaching beauty
- Ridgeline format: the heatmap becomes a ridgeline (or horizon chart) — multiple rows shown as stacked, filled bands rather than a grid
- Every Tufte invariant preserved: this demo is the proof of concept — beauty and rigor are not in tension. Lie factor ≈ 1, data-ink maximized, no chartjunk, labels are direct, baseline honest
Insight revealed: The tension between "austere" and "beautiful" is false. Tufte's principles don't demand ugliness — they demand honesty. An iridescent palette can serve the data (encoding density via color saturation or value) without decorating the data. The "beautiful" version is not a violation of Tufte; it's a deeper application of it.
Summary Table¶
| Demo | Before | After | Key Tufte Principle |
|---|---|---|---|
| GISS Temperature | Rainbow lines, shared grid, legend | Small multiples + range frames + global underlay | Small multiples; multifunctioning elements |
| Kyoto Sakura | Connected line chart | Dot scatter + running median + inverted y-axis + epoch bands | Data-ink; visual hierarchy; micro/macro |
| Sunspot Butterfly | Five aggregated lines | Maunder heatmap, 93K cells | Data density; avoiding over-reduction |
| Sunspot Austere/Beautiful | Monochrome heatmap | Iridescent ridgeline | Aesthetic integration without compromising integrity |
Core Pattern Across All Demos¶
The skill works by applying Tufte's eraser test: for every element, ask "can it be removed without losing information?" and remove it. Then apply the collision test: for every text element, check if anything occupies its bounding box and resolve crowding. The result is visualizations that show more data in less space with greater visual clarity — which is precisely what Tufte defined as graphical excellence.
Bibliography¶
- Parente, A. (2026, May 24). Apparently the one day I don't check the internet this goes viral. [Tweet]. X. https://x.com/draparente/status/2058455309157544428
- Parente, A. (2026). tufte-viz pre/post demos. GitHub Pages. https://aparente.github.io/claude-skills/skills/tufte-viz/demos/
- Parente, A. (2026). aparente/claude-skills [GitHub repository]. https://github.com/aparente/claude-skills