1---
2name: data-visualizer
3description: 'Charts, dashboards, and data visualizations using Recharts, Chart.js, and D3.js. Use when building charts, dashboards, or interactive data displays. Use for chart type selection, data storytelling, annotation patterns, responsive design, accessibility, and performance optimization.'
4license: MIT
5metadata:
6 author: oakoss
7 version: '1.2'
8---
9
10# Data Visualizer
11
12Build charts, dashboards, and interactive data visualizations using modern libraries. Covers Recharts (React), Chart.js (framework-agnostic), and D3.js (custom/advanced).
13
14## Library Selection
15
16| Library | Best For | React | Custom | Bundle (gzip) |
17| -------- | ----------------------------------- | ------- | -------- | ---------------------- |
18| Recharts | Quick React charts, standard types | Native | Limited | ~139KB |
19| Chart.js | Framework-agnostic, simple API | Wrapper | Moderate | ~68KB (tree-shakeable) |
20| D3.js | Custom visualizations, full control | Manual | Full | ~13-30KB per module |
21
22## Chart Type Selection
23
24| Chart | Best For | Avoid When |
25| --------- | ------------------------------------ | --------------------------------- |
26| Line | Trends over time, continuous data | Categorical data |
27| Bar | Comparing categories, rankings | Continuous data |
28| Pie/Donut | Part-to-whole (max 5-7 slices) | >7 categories, precise comparison |
29| Area | Volume over time, stacked categories | Too many overlapping series |
30| Scatter | Correlation, outliers, distribution | Time series |
31| Heatmap | Intensity across two dimensions | Simple comparisons |
32
33## Dashboard Patterns
34
35| Pattern | Use Case | Key Feature |
36| ------------------- | -------------------- | ---------------------------------- |
37| KPI Dashboard | Executive metrics | Trend indicators, card grid |
38| Real-Time | Live monitoring | SSE/WebSocket, animation disabled |
39| Interactive Filters | Exploratory analysis | Period/region selects, drill-down |
40| Drill-Down | Hierarchical data | Click to zoom (year → month → day) |
41
42## Responsive Design
43
44| Approach | Implementation |
45| ---------------------- | ------------------------------------------------- |
46| Container-based sizing | `<ResponsiveContainer width="100%" height={300}>` |
47| Aspect ratio mode | `<ResponsiveContainer width="100%" aspect={2}>` |
48| Mobile-aware | Reduce `strokeWidth`, `height` on small screens |
49| Label simplification | Fewer axis labels on mobile |
50
51## Common Mistakes
52
53| Mistake | Fix |
54| ---------------------------- | ---------------------------------------------- |
55| Fixed width/height | Use `ResponsiveContainer` |
56| Animation on real-time data | Set `isAnimationActive={false}` |
57| Too many pie slices | Max 5-7 slices, group rest as "Other" |
58| Non-accessible colors | Use WCAG AA compliant, colorblind-safe palette |
59| Loading entire chart library | Lazy load with dynamic imports |
60| No data formatting | Use `Intl.NumberFormat` for currency/percent |
61
62## Delegation
63
64- **Explore data shape and available fields before choosing chart type**: Use `Explore` agent
65- **Build a complete multi-chart dashboard from requirements**: Use `Task` agent
66- **Plan visualization architecture for large-scale analytics pages**: Use `Plan` agent
67
68## References
69
70- [Library Selection](references/library-selection.md) — Recharts, Chart.js, D3.js setup and examples
71- [Chart Types](references/chart-types.md) — line, bar, pie, area, scatter, heatmap with use cases
72- [Dashboard Patterns](references/dashboard-patterns.md) — KPI, real-time SSE, interactive filters, drill-down
73- [Design and Accessibility](references/design-and-accessibility.md) — color schemes, colorblind-safe palettes, responsive, animation
74- [Data Formatting and Export](references/data-formatting-and-export.md) — number formatters, CSV export, PNG export
75- [Performance](references/performance.md) — lazy loading, virtualization for large datasets
76- [Storytelling and Annotation](references/storytelling-and-annotation.md) — data narratives, annotations, color strategy, edge states
oakoss