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