| name | data-visualization |
| description | Design truthful, readable charts, diagrams, dashboards, and metric displays with appropriate encodings, hierarchy, annotation, and responsive behavior. |
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.
