Tufte Report

Tufte Report — Data-Driven Infographic Skill

Create standalone HTML reports that combine editorial narrative with interactive data visualization in Edward Tufte's style: high information density, minimal chart junk, typography-first design.

Design Philosophy

Tufte's core principles drive every decision:

• Data-ink ratio: every pixel of ink should represent data, not decoration
• Small multiples: repeat a design to show comparison, not animation
• Sparklines: word-sized graphics that live inside prose
• Layering: overview first, then detail on demand
• Integration: text and graphics share the same visual space (sidenotes, not footnotes)

The report should feel like a well-edited magazine feature — you read it top to bottom, narrative carries you through the data, and every chart earns its space by answering a specific question.

Onboarding — Ask Before Building

Before writing ANY code, ask these questions. Do not proceed until all are answered:

1. What data sources do you have? (CSV, JSON, SQLite, API endpoint, or raw numbers)
2. What is the primary question this report should answer? (one sentence — this becomes the title and drives all design decisions)
3. How many sections do you need? (cap at 8 — push back if more are requested; each section should answer one sub-question)
4. What's the output format? (standalone HTML file, or embedded component)
5. Time budget? Provide an estimate:
   • 1-2 sections with tables only: ~200 LOC, ~5 min bypass / ~10 min manual
   • 3-4 sections with 2-3 charts: ~500 LOC, ~15 min bypass / ~25 min manual
   • 5-8 sections with charts + health data + sparklines: ~1200 LOC, ~30 min bypass / ~50 min manual

Scope Protection

This skill enforces hard limits to prevent scope creep:

• Max 8 sections — if the user asks for more, suggest combining related topics
• Max 2 chart types per section — a section gets one primary chart and optionally one supporting chart or table. More than that means the section should split
• Max 3 colors per chart — beyond that, use small multiples instead of rainbow legends
• No 3D charts, no pie charts, no donut charts — these violate Tufte principles
• No gratuitous animation — scroll-reveal on enter is fine; spinning, bouncing, or pulsing is not
• Every chart must have a caption — if you can't write a one-sentence caption explaining what the chart shows, the chart shouldn't exist

When the user asks for something outside these limits, respond with: "That would take the report from [current LOC estimate] to [new estimate]. The extra complexity adds [X] but risks [Y]. Shall I proceed, or can we [simpler alternative]?"

Architecture

report.html (standalone, no build step)
├── Google Fonts CDN (EB Garamond)
├── jsDelivr CDN (Monaspace Argon woff2)
├── jsDelivr CDN (Chart.js 4.x UMD)
├── Inline <style> (design system CSS)
├── Inline HTML (semantic structure)
└── Inline <script> (data + Chart.js configs + sparklines + scroll-reveal)

No build tools, no frameworks, no npm. One file, opens in any browser.

Design System

Read references/design-tokens.md for the complete CSS variables, typography scale, and color palette.

Read references/components.md for the HTML+CSS snippet of every reusable component.

Read references/charts.md for Chart.js configuration patterns and inline SVG sparkline code.

Report Structure Template

Every report follows this skeleton:

1. Title + subtitle + data source tags (monospace, subtle)
2. [Optional] Status dashboard (4-column KPI strip)
3. Overview narrative with inline sparklines + TOC sidebar
4. Summary cards (2-4 KPI tiles with sparklines)
5. Sections (each: state-line → chart+narrative aside → table+narrative aside)
6. [Optional] Decision register (threshold table with status colors)
7. Footer (generation date, sources)

Section Pattern

Each section follows this rhythm:

<h2> with ↑ back-to-top link
<p class="state-line"> — one italic sentence, the takeaway
<div class="aside-container"> — chart on left, narrative on right
<div class="aside-container"> — table on left, interpretation on right

The alternation of chart→narrative→table→narrative creates visual breathing room and prevents "wall of data" fatigue.

Rules for Narrative Text

• State-lines (the italic intro under each heading): one sentence, max 20 words, states the conclusion not the topic. "HRV down 13%, steps down 42%" not "This section covers health metrics"
• Aside narratives: 3-4 short paragraphs, each starting with a bold keyword. Written like a newspaper sidebar — facts first, interpretation second
• Flyouts: reserved for actionable insights or methodology notes. The ✦ symbol marks them as "pay attention"
• No "tells its own story" or similar filler. Every sentence should contain a number or a decision

Dual-Font Strategy