Tufte

Tufte — visual display, by the book

This skill turns "make me a chart" into a Tufte-compliant chart. Distilled from *The Visual Display of Quantitative Information* (1983/2001), *Envisioning Information* (1990), and *Visual Explanations* (1997).

What this skill produces

Two output stacks, selected by the user's project context:

• Self-contained HTML/SVG — single file, inline SVG, no external deps. For one-offs, embeds, screenshots, slide decks.
• React (Recharts + D3 fallback) — for projects that already use React. Recharts where the chart type fits; raw D3-in-React where it doesn't (slopegraph, sparkline-in-table, small multiples).

How to use this skill

When invoked, work through these in order:

• Read principles.md — 10 rules, one paragraph each. The whole frame.
• Use chart-selection.md to pick the chart type from the user's data and goal. Don't reach for a chart you know; reach for the one this table prescribes.
• Apply kill-list.md before rendering — strip the things that don't belong in any Tufte-compliant chart.
• Check before-after.html when the user wants to see the difference. Six side-by-side examples covering the cases AI tools default to badly.
• Read report-voice.md when the output is a report, recap, or slide with prose around the chart. The writing can ruin a clean chart. Plain business English, no em-dashes, no AI slop.
• Run checklist.md before declaring the chart done. Twenty items, takes 30 seconds.

For a quick lookup, cheatsheet.html (and cheatsheet.pdf) is the one-page reference.

Default behavior

Tufte rules apply by default. If the user explicitly requests something on the kill list ("I need a pie chart for this board deck because the CFO wants one"), comply, but note the Tufte alternative in a one-line comment in the code or the response.

Prose around the chart

When the output is a report, recap, or slide, the text matters as much as the

chart. Write plain business English: no em-dashes, no drama or theatrics, no hype

verbs, no AI-slop jargon. Name every label and caption for the specific case, not

a placeholder. First the number, then what it means. See report-voice.md for

the full kill/keep list. A clean chart wrapped in slop reads as slop.

The kill list, summarized

These are not in any Tufte-compliant chart unless the user explicitly overrides:

• 3D effects on any 2D quantity
• Pie charts (use a sorted bar or a small table)
• Dual-axis charts (use two small multiples instead)
• Rainbow color scales for ordered data (use sequential single-hue)
• Heavy gridlines, frame boxes, tick marks at every minor unit
• Drop shadows, gradient fills, bevels, glow, "ducks"
• Legends placed away from data (label data directly)
• Moiré patterns, cross-hatching, dense stippling
• Redundant data-ink (bar plus number plus axis plus gridline all showing the same quantity)
• KPI cards with giant numbers and no context

The keep list

These belong in most Tufte charts:

• Direct labels on data (no legends)
• Sparklines next to numbers
• Small multiples for any cross-cut
• Range frames (axes only span where data exists)
• Subtle gridlines (white-on-light, or omit)
• A single accent color (--accent red), actually applied to the focal data point — not declared and left unused. Minimal ink is not the same as no signal. If nothing carries the accent, the chart is flat; pick the point the reader should look at and color it.
• Data marks where they aid reading: dots on line endpoints, dot plots in place of bare bars
• Sorted categories (rarely alphabetical, almost never as-input)
• Tables when n ≤ ~20 and exact values matter

File index

| File | Purpose |

|---|---|

| principles.md | Tufte's 10 rules with practical interpretation |

| chart-selection.md | Data + goal → chart type decision table |

| kill-list.md | What to remove from any chart |

| before-after.html | Six side-by-side comparisons (open in browser) |

| report-voice.md | Prose rules for reports/recaps/slides (no slop, no em-dashes) |

| checklist.md | 20-item pre-publish check |

| cheatsheet.html | One-page printable reference |

| cheatsheet.pdf | Same, as PDF |

| presets/html-svg.md | Style tokens + a working SVG bar chart, line chart, sparkline, small multiple |

| presets/react.md | Recharts theme + D3 patterns for slopegraph, sparkline-in-table, small multiples |