tufte-viz — Core Principles¶

The tufte-viz skill encodes Edward Tufte's visualization philosophy across all four of his books, organized as progressive disclosure: a lightweight always-loaded SKILL.md plus two on-demand reference files for deeper principles.

Skill Structure¶

skills/tufte-viz/
├── SKILL.md                         # Always loaded (~4 KB)
├── references/
│   ├── tufte-principles.md         # On demand: Visual Display
│   └── analytical-design.md         # On demand: Envisioning + Visual Explanations + Beautiful Evidence
└── demos/
    ├── giss-temperature.html
    ├── kyoto-sakura.html
    ├── sunspot-butterfly.html
    └── sunspot-pretty.html

SKILL.md — The Always-Loaded Core¶

Workflow for New Visualizations¶

1. Clarify the data story — What comparisons matter? What's the key insight? Who's the audience?
2. Select approach — High comparison need → small multiples; dense data → tables + sparklines; time-series → minimal grid line charts; part-to-whole → avoid pie charts
3. Design with data-ink in mind — Start minimal; every element earns its ink; default to grayscale, use color purposefully
4. Apply the eraser test — Can any element (label, tick, gridline, border, annotation) be erased without losing information not already conveyed elsewhere? Watch for duplicate encodings.
5. Apply the collision test — Mentally draw bounding boxes for all text; check for overlaps with data lines, other labels, or dense markers. Fixes: move prose to figcaption, relocate epoch labels to a strip above the plot, push baseline labels to outside margin, use leader lines
6. Apply the Tufte test — See references/tufte-principles.md

Workflow for Critiquing Visualizations¶

1. Check graphical integrity — Calculate lie factor, verify baselines/scales, look for 3D distortion
2. Identify chartjunk — Decorative elements, heavy grids, unnecessary 3D, moiré patterns
3. Evaluate data-ink ratio — What can be erased? What's redundant?
4. Suggest specific before/after recommendations

Quick Checklist¶

• [ ] Lie Factor ≈ 1.0 (no visual distortion)
• [ ] Maximum data-ink ratio
• [ ] Zero chartjunk
• [ ] Clear labeling
• [ ] Answers "compared to what?"
• [ ] Shows causality or mechanism where relevant
• [ ] Multivariate (not over-reduced)
• [ ] Words, numbers, images integrated — not segregated
• [ ] Reveals multiple levels of detail (micro + macro)
• [ ] Layering: primary data dominates, secondary recedes
• [ ] Appropriate data density

references/tufte-principles.md — The Visual Display of Quantitative Information¶

1. Graphical Excellence¶

A great statistical graphic lets complicated ideas come through plainly, precisely, and without waste.

Core qualities:
- Show the data
- Induce the viewer to think about substance, not methodology or design
- Avoid distorting what the data have to say
- Present many numbers in a small space
- Make large datasets coherent
- Encourage eye comparison of different pieces of data
- Reveal data at several levels of detail (broad overview to fine structure)
- Serve a reasonably clear purpose
- Integrate closely with statistical and verbal descriptions

2. Graphical Integrity — The Lie Factor¶

Lie Factor = Size of effect shown in graphic / Size of effect in data

• Lie Factor = 1.0 → truthful
• Lie Factor > 1.05 or < 0.95 → distortion

Six principles of graphical integrity:
1. Representation of numbers should be directly proportional to quantities represented
2. Clear, detailed, thorough labeling defeats distortion
3. Show data variation, not design variation
4. In time-series, standardize money (deflate) and use consistent baselines
5. Dimensions of graphics should not exceed dimensions of data
6. Graphics must not quote data out of context

Common violations: 3D effects on 2D data, truncated axes, inconsistent intervals, area/volume encoding of linear data, missing context.

3. Data-Ink Ratio¶

Data-Ink Ratio = Data-ink / Total ink used in graphic

Maximize within reason:
1. Erase non-data-ink (decoration, heavy grids, boxes)
2. Erase redundant data-ink (3D when 2D suffices)
3. Revise and edit

The eraser test: if you can erase something without losing data information, erase it.

4. Chartjunk — Three Categories¶

A. Unintentional optical art (moiré vibration) — busy patterns that create visual noise, cross-hatching that vibrates, competing visual frequencies.

B. The Grid — heavy grids compete with data; grids should be muted or eliminated; if needed, use light gray or dotted lines.

C. The Duck — graphics that draw attention to their own design; decoration masquerading as information; style over substance.

Chartjunk indicators: viewer notices the design before the data; colors/patterns used for decoration not encoding; 3D effects, shadows, gradients without purpose.

5. Small Multiples¶

Series of graphics showing the same combination of variables, indexed by changes in another variable. Same design structure repeated; changes in data, not design; enables direct visual comparison; high information density; eye moves across variations effortlessly.

Design guidelines: identical scales across all panels; consistent visual encoding; minimal between-panel decoration; clear labeling of what varies; tight spacing.

6. Data Density & Information Resolution¶

Data density = numbers plotted per unit area. High data density is a sign of graphical quality.

Shrink principle: graphics can often be reduced significantly while maintaining readability and gaining impact. Consider sparklines, condensed time-series, small multiple arrays.

7. Multifunctioning Graphical Elements¶

Every graphical element should serve multiple purposes when possible. Data measures that can also serve as: label, scale marker, grid reference.

Examples: data points that also serve as labels (scatter plots with text); axis that is also a data series; range frames (axis shows data range, not arbitrary extent).

8. Aesthetics and Technique¶

Balance complexity and simplicity: simple design, complex data. Complexity should come from data, not decoration.

Visual hierarchy: Data > Labels > Annotations > Grids > Borders.

Color use: sparingly and purposefully; ensure accessibility; gray as default, color for emphasis; avoid rainbow color maps for sequential data.

references/analytical-design.md — Envisioning Information, Visual Explanations, Beautiful Evidence¶

1. The Six Principles of Analytical Design (from Beautiful Evidence)¶

Every display should answer "compared to what?" — the fundamental analytical act.

1. Comparison first — every display should answer "compared to what?"
2. Reveal mechanism, not just outcome — move beyond description to causality, structure, explanation
3. Embrace multivariate data — real problems involve more than one or two variables
4. Interleave words, numbers, and images — don't segregate by mode; labels next to data
5. Document the evidence — provenance, scales, sources, measurements; trust requires traceability
6. Content quality decides everything — no amount of design fixes weak evidence

2. Sparklines¶

Word-sized, data-intense graphics. Typographic resolution: sized like text (~14–20px height), embedded inline with prose or tables. No axes, no labels, no decoration. Endpoints often marked. Use a single colored dot for a key point. Pair with the most recent numeric value.

Use for: dashboards with many metrics, inline prose trend references, anywhere a full chart would dominate but trend matters.

3. Layering and Separation¶

Visually distinct elements can coexist in the same space if layered — separated by value, weight, hue, or transparency rather than spatial isolation.

Techniques:
- 1+1=3 effect: two heavy lines next to each other create a phantom third line; lighten one to suppress this
- Hierarchy by weight: primary data dark/saturated; secondary light gray; annotations even lighter
- Color for separation, not decoration: distinct hues let overlapping data remain readable
- Whisper, don't shout: grids, axes, reference lines fade into background

Test: squint at the graphic. Most important data should remain visible; chartjunk should disappear first.

4. Micro/Macro Design¶

A micro/macro graphic reveals different stories at different viewing distances.

• Macro view (zoomed out, peripheral): overall pattern, shape, trend
• Micro view (close inspection): individual data points, labels, exceptions

Canonical examples: Vietnam Memorial (macro = sweep of names; micro = a single name), galaxy maps, financial tables with sparklines.

5. Escaping Flatland¶

Good information design adds dimensions without 3D gimmicks. Dimensions on flat media: color, size, shape, position (2-3 axes via projection), time (small multiples, animation, sparklines), layering (foreground/background via value).

Anti-pattern: 3D bar charts, pie charts with depth, isometric projections that distort proportions.

6. Range-Frame and Dot-Dash Plot¶

Range-frame: replace full axis with a line spanning only the data range. Axis ends at min/max values, not arbitrary round numbers.

Dot-dash plot: scatter plot where axes are replaced by marginal rug plots — axes show marginal density as well as position.

Pattern: every standard chart element can be redesigned to carry data.

7. Confections, Parallelism, Narrative¶

Confections: assemblages of disparate visual elements (images, maps, text, diagrams) into a single explanatory composition. Examples: Minard's Napoleon march, Snow's cholera map, exploded technical illustrations. They work when each element serves the argument.

Parallelism: repetition of visual structure to enable comparison — small multiples are one form, but extends to side-by-side maps, before/after states, repeated annotation styles.

Narrative graphics of space and time: combine spatial and temporal dimensions in one frame. Minard's Napoleon graphic encodes troop size, geography, direction, temperature, and time simultaneously.

8. Cause and Effect¶

Causality is hard to visualize because it requires showing both the variables and the mechanism linking them.

Techniques: show intervention and response in the same frame; annotate the causal mechanism directly on the data; use sequence (small multiples through time) to imply mechanism; pair the data display with a process diagram.

Worked example: Challenger O-ring decision. The available data, plotted against temperature, showed catastrophic risk — but the engineers presented it in a way that hid the causal relationship. Tufte's redesign makes the causality unavoidable.

Extended Tufte Test¶

After the standard 7-question test (data-ink, integrity, chartjunk, excellence, comparison, density, context), add:

8. Comparison: Does the graphic answer "compared to what?"
9. Causality: Is the mechanism or explanation visible, not just the pattern?
10. Multivariate: Are interactions among variables shown, or has the problem been over-reduced?
11. Integration: Are words, numbers, and images interleaved — or segregated?
12. Documentation: Can a stranger evaluate the evidence (sources, scales, authorship)?
13. Layering: Do important elements dominate; do secondary elements recede?
14. Micro/macro: Does the display reward both a glance and a close read?

Principles Applied in Demos¶

Installation & Trigger¶

Install to Claude Code:

cp -r skills/tufte-viz ~/.claude/skills/

Auto-triggers when describing: designing new data visualizations, critiquing existing charts, reviewing dashboards for graphical integrity, deciding between visualization approaches, reducing chartjunk, planning small multiples or high-density displays.

Bibliography¶

• Tufte, E. R. (1983). The Visual Display of Quantitative Information. Graphics Press.
• Tufte, E. R. (1990). Envisioning Information. Graphics Press.
• Tufte, E. R. (1997). Visual Explanations. Graphics Press.
• Tufte, E. R. (2006). Beautiful Evidence. Graphics Press.
• Parente, A. (2026). tufte-viz skill [GitHub]. https://github.com/aparente/claude-skills/tree/master/skills/tufte-viz