Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From design-practice
Design Machines data visualization and information graphics philosophy rooted in graphical integrity, data-ink efficiency, and editorial integration. Use when critiquing charts and graphs, choosing chart types, advising on visualization choices, evaluating information graphics, building dashboards, or reviewing any data presentation in HTML/CSS, SVG, D3.js, Figma, InDesign, Illustrator, or Affinity. Trigger this skill when the user asks about charts, graphs, infographics, data display, sparklines, pie charts, bar charts, line charts, dashboards, data-ink ratio, or how to present numbers visually — even casually like "should I use a pie chart here" or "this chart looks cluttered." Also trigger when building Assembly financial dashboards, equity visualizations, or any interface that displays quantitative data to co-op members. Draws primarily on Dona M. Wong, Edward Tufte, and Francesco Franchi.
npx claudepluginhub design-machines-studio/depot --plugin design-practiceHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-practice:datavizThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Above all else, show the data. Add as many layers of information as necessary to convey the key message, and not one bit more. Simplify, simplify, simplify.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
Share bugs, ideas, or general feedback.
Above all else, show the data. Add as many layers of information as necessary to convey the key message, and not one bit more. Simplify, simplify, simplify.
Infographics are not decoration -- they are acts of journalism. A visualization is simultaneously design and narrative, representation and interpretation.
You never generate designs. You inform, critique, and advise.
The representation of numbers, as physically measured on the surface of the graph, must be directly proportional to the numerical quantities represented. Show data variation, not design variation. Graphics must not quote data out of context.
Maximize the share of ink devoted to non-redundant display of data information. Erase non-data-ink. Erase redundant data-ink. Revise and edit.
Data-ink ratio = Data-ink / Total ink used
Data visualization is a narrative language: representation plus interpretation to develop an idea. The designer shapes a view of the data with a particular goal. Design serves as content, and the designer works as a facilitator.
| Chart Type | Use When | Rules |
|---|---|---|
| Bar chart | Comparing discrete categories; 5+ data points | Start Y-axis at zero; bar width = 2x spacing; max 5 bars ideal; shade left-to-right lightest-to-darkest |
| Line chart | Showing trends over time | Max 4 lines (never exceed 5); label directly on lines; Y-axis = 2/3 of chart area |
| Pie chart | Part-to-whole with 2--3 segments | Largest slice starts at 12 o'clock, clockwise; never exceed 5--7 segments; no 3D ever |
| Table | Small datasets under 20 values; precise lookup needed | Not for visual comparison |
| Sparkline | Inline trend context in text or tables | No axes, labels, or decoration; word-sized |
| Small multiples | Comparing many series across one variable | Consistent frame, consistent scale, let the eye detect patterns |
Lie Factor = Size of effect shown in graphic / Size of effect in data
| Lie Factor | Meaning |
|---|---|
| 1.0 | Truthful |
| > 1.05 | Substantial overstatement |
| < 0.95 | Substantial understatement |
Any deviation from 1.0 distorts the reader's perception.
| DO | DON'T |
|---|---|
| Use gray for grids, backgrounds, secondary elements | Use bright colors for structural elements |
| Assign color only when it encodes information | Use color for decoration or branding in data areas |
| Ensure legibility without color (B&W test) | Rely on color alone to differentiate data |
| Use muted, naturally blended backgrounds | Use fully saturated primaries for everything |
| Bright/saturated for primary data, muted for context | Give equal visual weight to all elements |
| Use the smallest effective difference between categories | Over-differentiate with excessive contrast |
Gray is the most important color in information design (Tufte). Use it for grids, backgrounds, and contextual elements so data colors stand out naturally.
Remove everything that does not represent data variation:
The 1+1=3 effect: Two adjacent visual elements create an unintended third element. Manage through subtle spacing, muted colors, and the smallest effective difference.
Not "how to make numbers and vectors look clever together" but a narrative language. The viewer is invited to join in the process of interpretation.
Infographics combine verbal and visual communication systems. Words, images, and numbers together offer the greatest opportunity to increase communication effectiveness.
stroke-opacity, direct labels, minimal decoration<figure> and <figcaption> for accessible chart markupWhen critiquing a data visualization:
| Topic | File | When to Load |
|---|---|---|
| Chart Rules | ${CLAUDE_SKILL_DIR}/references/chart-rules.md | Wong's detailed dos and don'ts for every chart type |
| Tufte Principles | ${CLAUDE_SKILL_DIR}/references/tufte-principles.md | Full Tufte framework: data-ink, integrity, analytic design |
| Editorial Dataviz | ${CLAUDE_SKILL_DIR}/references/editorial-dataviz.md | Franchi's integration of data visualization in editorial context |