Tufte Viz

Tufte Visualization Ideation

Apply Edward Tufte's principles to design clear, honest, high-density data visualizations.

Workflow

For new visualizations:

1. Clarify the data story

• What comparisons matter?
• What's the key insight to communicate?
• Who's the audience?

1. Select approach using Tufte principles:

• High comparison need -> Small multiples
• Dense data -> Consider data tables, sparklines
• Time-series -> Line charts with minimal grid
• Part-to-whole -> Avoid pie charts; prefer bar/table

1. Design with data-ink in mind

• Start minimal, add only what's necessary
• Every element must earn its ink
• Default to grayscale; use color purposefully

1. Apply the Tufte test (see references/tufte-principles.md)

For critiquing visualizations:

1. Check graphical integrity

• Calculate lie factor if proportions seem off
• Verify baselines and scales
• Look for 3D distortion

1. Identify chartjunk

• Decorative elements
• Heavy grids
• Unnecessary 3D effects
• Moire patterns

1. Evaluate data-ink ratio

• What can be erased?
• What's redundant?

1. Suggest improvements with specific before/after recommendations

For writing chart code:

1. Apply universal rules from references/implementation-guide.md

• 22 concrete defaults: no legends, no gridlines, range-frame axes, gray-first color, serif fonts
• Chart type guidance, color quick reference, validation checklist

1. Load ONE library rule file matching the target:

| Library | Rule file | Essential config | |---------|-----------|------------------| | Recharts | rules/recharts.md | `, remove | | ECharts | rules/echarts.md | splitLine: { show: false }, legend: { show: false } | | Chart.js | rules/chartjs.md | grid: { display: false }, plugins.legend.display: false | | matplotlib | rules/matplotlib.md | spines['top'].setvisible(False), font.family: serif | | Plotly | rules/plotly.md | showgrid=False, plotbgcolor='#fffff8' | | D3/SVG | rules/d3-svg.md | .domain { display: none }`, no background rects |

1. Validate against the checklist in references/implementation-guide.md

Reference Files

Theory (why)

• references/tufte-principles.md — core principles from Visual Display of Quantitative Information: lie factor, data-ink, chartjunk, small multiples, integrity.
• references/analytical-design.md — extensions from Envisioning Information, Visual Explanations, and Beautiful Evidence: the 6 principles of analytical design, sparklines, layering & separation, micro/macro, range-frames, causality, confections.

Practice (how)

• references/implementation-guide.md — 22 universal rules, color/typography quick reference, chart type guidance, validation checklist.
• references/anti-patterns.md — detection table for common violations with per-library fix patterns.
• rules/*.md — library-specific code snippets and configuration (one file per library).

Quick checklist:

• [ ] Lie Factor ~ 1.0 (no visual distortion)
• [ ] Maximum data-ink ratio
• [ ] Zero chartjunk
• [ ] Direct labels, not legends
• [ ] 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
• [ ] Accessible (contrast, dual encoding, aria-label)
• [ ] Responsive (adapts at narrow viewports)
• [ ] Appropriate data density

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: pjsny
• Source: pjsny/tufte-viz
• License: MIT

Install and usage instructions live in the source repository linked above.