# Data Visualization

> Chooses encodings, chart types, layouts, and rendering tech so visualizations communicate accurately and accessibly. Use this skill when building charts, graphs, or dashboards, picking SVG/Canvas/WebGL, or making visuals colorblind-safe and screen-reader accessible. Do not use when/for general UI layout without data graphics (use ui-design-principles) or backend analytics pipelines.

- Skill: `jagreehal/data-visualization` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add jagreehal/data-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jagreehal/data-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: jagreehal (https://skillmd.com/u/jagreehal)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/jagreehal/data-visualization

---


# Data Visualization

## Critical rules

- Visualization is communication — every visual element must serve understanding.
- Prefer established algorithms/libraries (dagre, d3-force, ELK) over custom layout.
- Encode by perceptual accuracy: position > length > angle > area > color.
- Never rely on color alone; pair with shape, pattern, or labels.
- Match rendering to scale: SVG <1000, Canvas 1000–10000, WebGL >10000.
- Before chart selection catalogs or rendering/a11y detail, read the matching resource below.

## Workflow

1. State the question the viz must answer and the data volume.
2. Before picking a chart type or encoding, read [references/chart-selection.md](references/chart-selection.md).
3. Choose encoding/chart; reject pie-heavy, 3D, dual-axis, and non-zero bar baselines when they mislead.
4. Before implementing layout/render/a11y, read [references/rendering-and-a11y.md](references/rendering-and-a11y.md).
5. Pick SVG/Canvas/WebGL and a layout library; keep layout off the main thread when heavy.
6. Add title/desc, keyboard support, table fallback; verify colorblind-safe encoding.

## Resources

- [references/chart-selection.md](references/chart-selection.md) — encoding hierarchy, chart-by-question, color, anti-patterns. Read when choosing a chart.
- [references/rendering-and-a11y.md](references/rendering-and-a11y.md) — render thresholds, layouts, perf, a11y, libraries. Read when implementing.

## Validation

- [ ] Question → chart type selected accordingly
- [ ] Data volume → rendering technology matches threshold
- [ ] Established algorithm/library used (not custom layout)
- [ ] Colorblind-safe: shape/pattern/label, not color alone
- [ ] Accessible: title, description, table fallback, keyboard
- [ ] Perceptually honest: position encoding, zero baseline, 2D, single axis meaning

## Constraints

- General UI without data graphics → `ui-design-principles`. Backend analytics pipelines are out of scope.
- Adjacent: `design-principles`, `documentation-standards`.