What problem does it solve?
It helps you choose the right chart type, encode data with clear color and labeling, and implement accessible, responsive data visualizations that communicate insights instead of confusing users.
Core Features & Use Cases
- Chart selection decision tree: Matches your data task (compare, trend, distribution, relationship, part-of-whole, geography, KPI) to the most appropriate chart style.
- Color for data (sequential, diverging, categorical): Guides palette selection (including colorblind-safe options) so color reflects meaning and supports readability.
- Annotation and labeling strategy: Recommends direct labels, insight-driven titles, axis/unit formatting, and targeted callouts to reduce cognitive load.
- Accessibility and responsive patterns: Specifies ARIA/alt text expectations, non-color encoding (patterns/line styles), contrast guidance, keyboard/touch requirements, and mobile simplification rules.
- Implementation guidance by library: Provides design-to-code patterns across D3.js, Recharts, Chart.js, plus sparkline/KPI guidance and data storytelling principles.
Quick Start
Use the data-visualization skill to design an accessible dashboard chart for your dataset by selecting the correct chart type, applying an appropriate color strategy, and specifying labels/annotations that communicate the key insight.
