Data Visualization

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

juspay 34d5b57 1.1 KB Updated

File contents

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.

juspay/xyne-spaces/tree/main/apps/xyne-claw/design-skills/data-visualization commit 34d5b575e2

Frequently asked questions

npx skillmds@latest add juspay/data-visualization