# Data Visualization

> Design truthful, readable charts, diagrams, dashboards, and metric displays with appropriate encodings, hierarchy, annotation, and responsive behavior.

- Skill: `juspay/data-visualization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add juspay/data-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/juspay/data-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: juspay (https://skillmd.com/u/juspay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/juspay/data-visualization

---


# Data visualization

Choose the simplest visual that reveals the relationship.

- Comparison: bars. Trend: lines or areas. Composition: stacked bars or a small
  number of slices. Relationship: scatter. Flow or architecture: node-link
  diagram. Exact lookup: table.
- Label axes, units, periods, and sources. Start quantitative bar axes at zero
  unless a clearly explained exception is essential.
- Use color consistently and sparingly; do not encode crucial differences only
  through hue.
- Put the key takeaway near the visual and annotate meaningful changes.
- Avoid fabricated values. If the brief provides no data, use an explicitly
  labeled illustrative dataset or design an empty state.
- Make charts reflow without shrinking labels into illegibility.

Use native HTML/CSS/SVG for self-contained artifacts. Keep SVG text accessible
and provide an adjacent textual summary for complex visuals.