# Tufte Data Visualization > Generate Tufte-compliant charts and visualizations following principles from Edward Tufte's foundational books on data visualization - Skill: `aradotso/tufte-data-visualization` (Agent Skill) - Install (CLI): `npx skillmds@latest add aradotso/tufte-data-visualization` - Raw SKILL.md: https://api.skillmd.com/api/skills/aradotso/tufte-data-visualization/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: aradotso (https://skillmd.com/u/aradotso) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/aradotso/tufte-data-visualization --- # Tufte Data Visualization Skill > Skill by [ara.so](https://ara.so) — Claude Code Skills collection. A Claude Code skill that transforms chart requests into Tufte-compliant visualizations distilled from Edward R. Tufte's three foundational books: *The Visual Display of Quantitative Information*, *Envisioning Information*, and *Visual Explanations*. ## Installation ```bash git clone https://github.com/aref-vc/tufte-claude-skill.git ~/.claude/skills/tufte ``` The skill auto-loads on Claude Code's next launch. Verify with `/tufte` or by asking Claude to "make a chart." Update: ```bash cd ~/.claude/skills/tufte && git pull ``` Uninstall: ```bash rm -rf ~/.claude/skills/tufte ``` ## Core Principles The skill applies ten principles from Tufte's work: 1. **Show the data** — every decision asks "does this help see the data?" 2. **Maximize data-ink ratio** — ink that changes when data changes is data-ink 3. **Erase non-data-ink** — remove frame boxes, gridlines, minor ticks 4. **Erase redundant data-ink** — one encoding per quantity 5. **Graphical integrity** — lie factor 0.95-1.05, bars start at zero 6. **Small multiples** — N charts on shared scale vs. one chart with N lines 7. **Layering and separation** — data on top, labels next, scaffolding faintest 8. **Micro/macro readings** — readable from afar and up close 9. **Smallest effective difference** — subtle distinctions, gray + one accent 10. **Word-data integration** — sparklines in sentences, numbers near visuals ## Chart Selection The skill picks chart types based on your data structure and goal: | Data shape | Goal | Chart type | |------------|------|------------| | 1 value over time | Show trend | Sparkline | | 5-20 categories | Compare | Dot plot (sorted) | | 20+ categories | Compare | Table with inline sparklines | | Two time periods | Show change | Slopegraph | | Part-to-whole | Show composition | Sorted table with % bars | | Time series, multiple | Compare trends | Small multiples | | Distribution | Show spread | Strip plot or quantile dot plot | | Funnel/steps | Show drop-off | Horizontal bars (% of start) | | Geographic | Show regional patterns | Choropleth (sequential single-hue) | | Cohort/grid | Show patterns | Table with values + sequential color | ## Usage Patterns ### Basic Chart Generation ```javascript // Request: "Make a chart of monthly revenue for the last 12 months" // Output: Self-contained HTML with inline SVG sparkline

$847K Jan $620K → Dec $847K

``` ### Dot Plot for Category Comparison ```html ``` ### Small Multiples for Time Series ```javascript // Request: "Show revenue trend by region" // Output: React component with Recharts import { LineChart, Line, ResponsiveContainer } from 'recharts'; const data = { North: [12, 15, 14, 18, 20, 22, 24, 26, 25, 28, 30, 32], South: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], East: [15, 16, 14, 15, 17, 18, 20, 22, 21, 23, 25, 27], West: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21] }; export default function RegionalTrends() { return (

{Object.entries(data).map(([region, values]) => (

{region}: ${values[values.length - 1]}K

({ value: v }))}>

))}

); } ``` ### Slopegraph for Period Comparison ```html ``` ### Dashboard with KPI Table ```html

Metric	Current	vs Target
Revenue	$2.4M	+8%
Active Users	12.5K	-12%
Conversion	3.2%	+5%
NPS	67	+2%

``` ### React Component with Tufte Theme ```jsx // Request: "Create a time series chart in React" import { LineChart, Line, ResponsiveContainer, XAxis, YAxis } from 'recharts'; const data = [ { month: 'Jan', value: 620 }, { month: 'Feb', value: 680 }, { month: 'Mar', value: 720 }, { month: 'Apr', value: 710 }, { month: 'May', value: 750 }, { month: 'Jun', value: 780 }, { month: 'Jul', value: 800 }, { month: 'Aug', value: 820 }, { month: 'Sep', value: 810 }, { month: 'Oct', value: 830 }, { month: 'Nov', value: 840 }, { month: 'Dec', value: 847 } ]; export default function RevenueChart() { return (

Monthly Revenue

`$${v}K`} />

); } ``` ## Kill List The skill automatically removes these elements: - ❌ 3D effects, shadows, gradients - ❌ Pie charts (use sorted tables instead) - ❌ Dual-axis charts (make two charts) - ❌ Rainbow color scales (use sequential single-hue) - ❌ Frame boxes around charts - ❌ Heavy gridlines (use faint reference lines sparingly) - ❌ Redundant legends (direct label instead) - ❌ Chart titles that repeat axis labels - ❌ Decorative icons in dashboards - ❌ Area encoding for 1D quantities ## Stack Options Specify your preferred output format: ```bash # Self-contained HTML/SVG (default) "Make a chart as inline SVG" # React with Recharts "Create a chart in React" # D3 in React (for custom layouts) "Use D3 for a slopegraph" ``` ## Override Defaults Request non-Tufte elements when needed: ```bash "Make a pie chart of revenue mix — the CFO wants a pie" ``` Claude will produce the requested chart but note the Tufte alternative in a comment. ## Critique Existing Charts ```bash "Apply Tufte to this chart" ``` Paste chart code or describe the visualization. Claude will identify violations and produce a rewritten version. ## Configuration No configuration needed. The skill activates automatically when you: - Ask to create, make, design, or visualize a chart - Request dashboard or KPI tiles - Critique or improve existing visualizations - Invoke `/tufte` directly ## Checklist Before finalizing any chart, the skill verifies: 1. ✓ Data visible and readable 2. ✓ No frame box, minimal gridlines 3. ✓ Direct labels (no legend hunting) 4. ✓ Sorted by value (categories) or time 5. ✓ One encoding per quantity 6. ✓ Lie factor 0.95-1.05 7. ✓ Gray for context, one accent for focus 8. ✓ Values printed where needed 9. ✓ Works at distance and up close 10. ✓ Title adds information (not decoration) 11. ✓ Nothing on kill list 12. ✓ Would Tufte approve? ## Troubleshooting **Q: Chart still has gridlines** A: Specify "remove all gridlines" or "apply strict Tufte rules" **Q: Need a dual-axis chart** A: Request explicitly: "I need dual-axis despite Tufte's rule" — Claude will comply but suggest the alternative (small multiples on shared scale) **Q: Color scale not working for heatmap** A: Request "sequential single-hue scale" — avoid rainbow (red-yellow-green) **Q: Sparkline too small** A: Specify dimensions: "sparkline 150px wide, 40px tall" **Q: Want to see the before/after examples** A: Open `~/.claude/skills/tufte/before-after.html` in your browser ## File Reference - `principles.md` — Ten rules with Tufte quotes - `chart-selection.md` — Data shape + goal → chart type - `kill-list.md` — Elements to remove - `checklist.md` — 12-item pre-publish check - `presets/html-svg.md` — SVG templates and style tokens - `presets/react.md` — Recharts theme + D3 patterns - `cheatsheet.html` / `cheatsheet.pdf` — One-page reference ## Resources Read the skill files for complete guidance: ```bash ~/.claude/skills/tufte/principles.md ~/.claude/skills/tufte/chart-selection.md ~/.claude/skills/tufte/kill-list.md ``` --- **License:** MIT **Source:** https://github.com/aref-vc/tufte-claude-skill