Few / Tufte Design Library · Page 4 of 6
📊 Chart Library
Ten chart types with anatomy annotations and ❌/✅ do/don't pairs. Each chart implements a specific task from the Visual Selection Decision Framework v3.
Chart Type 1 — Horizontal Bar Chart · Task: Comparison (Ranked Items)
Anatomy
Horizontal Bar — Monthly Visits (sorted descending)
ChatGPT 5.8B Gemini 723M DeepSeek 319M Perplexity 148M Claude 148M G.AI Studio 99M ① sorted desc ② zero baseline (Lie Factor = 1.0) ③ range-frame ④ direct label ⑤ bar/main
① Sort descending by value — enables immediate rank reading
② Zero baseline mandatory — Lie Factor = 1.0
③ Range-frame axis: tick at min value, tick at max value only
④ Label inside bar if bw > 72px, else outside — no axis needed
⑤ Single hue: bar/main #4a4845 — no color legend required
Do / Don't
Common Bar Chart Errors
✅ Do — Sorted, zero-based, direct label
160 100 60 30
❌ Don't — Non-zero baseline (Lie Factor > 1)
50 160 axis starts at 50 → differences exaggerated
Chart Type 2 — Slope / Line Chart · Task: Trend Over Time
Anatomy
User Growth 2023→2025 — Slope chart, log Y, shared scale
2023 2024 2025 ChatGPT 388M Claude 20M DeepSeek 49.5M ① year guides (muted) ② log Y scale ③ end-value labels only
① Year guide lines: border/default 0.5px — visual structure without chartjunk
② Log Y scale when values span multiple orders of magnitude
③ End-value labels replace axis ticks — direct, no legend
④ No dots on data points — line alone is sufficient
⑤ Dashes distinguish overlapping series without color legend
Do / Don't
Spaghetti vs. Clarity
✅ Do — Label ends, no dots, max 5 series
A B
❌ Don't — Spaghetti with legend (eye travel)
rainbow palette + legend = eye travel
Chart Type 3 — Scatter Plot · Task: Relationship / Correlation
Anatomy
Revenue vs. Monthly Visits — range-frame axes, direct labels
ChatGPT Gemini DeepSeek Claude ① Perplexity Monthly Visits → Revenue → trend ② range-frame axis ① outlier label ③ regression line
① Outlier labels call out anomalies — Claude: high rev / low visits
② Range-frame: axis tick only at min and max data values
③ Regression line: border/default dashed — context, not decoration
④ Direct labels on dots — no legend required
Do / Don't
Scatter Errors
✅ Do — Range-frame, direct labels
Tool A Tool B
❌ Don't — Bubble (area decodes as diameter²)
2×dia→4×area
Chart Type 4 — Diverging Bar · Task: Part-to-Whole Comparison (Enterprise vs. Consumer)
Anatomy
Enterprise vs. Consumer Split — center-aligned, % labels
← Enterprise Consumer → G.AI Studio 60% 40% Claude 40% 60% ChatGPT 35% 65% Gemini 30% 70% DeepSeek 25% 75% ① center baseline ② bar/main left · bar/dim right ③ % labels both sides ④ sorted by enterprise %
Chart Type 5 — Deviation Bar · Task: Performance vs. Target (MoM Growth)
Month-over-Month Growth — zero baseline, red for negative
0% Claude +18.6% G.AI Studio +12.5% Perplexity +5.4% ChatGPT +2.2% Quark AI -1.2% Meta AI -3.8% DeepSeek -8.9% ① bar/main = positive ② accent/critical = negative
Chart Type 6 — Bullet Graph · Task: Performance vs. Budget (Few, 2006)
Anatomy
Tool Spend vs. Budget — replaces gauges/speedometers
ChatGPT Budget $200K $270K (+35%) ① Claude Budget $100K $130K (+30%) Gemini Budget $120K $95K (−21%) ① actual bar: bar/main ② perpendicular budget marker: 3px text-1 ③ qualitative bands: 3 muted grays (poor/ok/good) ④ no gauge — bullet replaces speedometer (Few 2006)
Chart Type 7 — Heatmap / Adoption Matrix · Task: Part-to-Whole across dimensions
Dept × Tool — saturation-encoded cells
ChatGPT Claude Gemini Copilot Perplexity Eng Mktg Finance Legal Design Low adoption High ① single hue: saturation-only variation ② no color legend — gradient strip inline