Data Visualizer
Build charts, dashboards, and interactive data visualizations using modern libraries. Covers Recharts (React), Chart.js (framework-agnostic), and D3.js (custom/advanced).
Library Selection
| Library | Best For | React | Custom | Bundle (gzip) |
|---|
| Recharts | Quick React charts, standard types | Native | Limited | ~139KB |
| Chart.js | Framework-agnostic, simple API | Wrapper | Moderate | ~68KB (tree-shakeable) |
| D3.js | Custom visualizations, full control | Manual | Full | ~13-30KB per module |
Chart Type Selection
| Chart | Best For | Avoid When |
|---|
| Line | Trends over time, continuous data | Categorical data |
| Bar | Comparing categories, rankings | Continuous data |
| Pie/Donut | Part-to-whole (max 5-7 slices) | >7 categories, precise comparison |
| Area | Volume over time, stacked categories | Too many overlapping series |
| Scatter | Correlation, outliers, distribution | Time series |
| Heatmap | Intensity across two dimensions | Simple comparisons |
Dashboard Patterns
| Pattern | Use Case | Key Feature |
|---|
| KPI Dashboard | Executive metrics | Trend indicators, card grid |
| Real-Time | Live monitoring | SSE/WebSocket, animation disabled |
| Interactive Filters | Exploratory analysis | Period/region selects, drill-down |
| Drill-Down | Hierarchical data | Click to zoom (year → month → day) |
Responsive Design
| Approach | Implementation |
|---|
| Container-based sizing | <ResponsiveContainer width="100%" height={300}> |
| Aspect ratio mode | <ResponsiveContainer width="100%" aspect={2}> |
| Mobile-aware | Reduce strokeWidth, height on small screens |
| Label simplification | Fewer axis labels on mobile |
Common Mistakes
| Mistake | Fix |
|---|
| Fixed width/height | Use ResponsiveContainer |
| Animation on real-time data | Set isAnimationActive={false} |
| Too many pie slices | Max 5-7 slices, group rest as "Other" |
| Non-accessible colors | Use WCAG AA compliant, colorblind-safe palette |
| Loading entire chart library | Lazy load with dynamic imports |
| No data formatting | Use Intl.NumberFormat for currency/percent |
Delegation
- Explore data shape and available fields before choosing chart type: Use
Explore agent - Build a complete multi-chart dashboard from requirements: Use
Task agent - Plan visualization architecture for large-scale analytics pages: Use
Plan agent
References
- Library Selection — Recharts, Chart.js, D3.js setup and examples
- Chart Types — line, bar, pie, area, scatter, heatmap with use cases
- Dashboard Patterns — KPI, real-time SSE, interactive filters, drill-down
- Design and Accessibility — color schemes, colorblind-safe palettes, responsive, animation
- Data Formatting and Export — number formatters, CSV export, PNG export
- Performance — lazy loading, virtualization for large datasets
- Storytelling and Annotation — data narratives, annotations, color strategy, edge states
