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?

2. 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

3. 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

4. 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

2. Identify chartjunk

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

3. Evaluate data-ink ratio

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

4. 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

2. Load ONE library rule file matching the target:

   Library	Rule file	Essential config
   Recharts	rules/recharts.md	<CartesianGrid stroke="none" />, remove <Legend />
   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'].set_visible(False), font.family: serif
   Plotly	rules/plotly.md	showgrid=False, plot_bgcolor='#fffff8'
   D3/SVG	rules/d3-svg.md	.domain { display: none }, no background rects

3. 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