Data Visualization
Rules
- Recharts for standard React charts — composable, typed, responsive out of the box
- Nivo for rich interactive charts (heatmaps, treemaps, sankeys) — declarative API with built-in animations
- D3 only for custom/novel visualizations — use with React refs, don't let D3 manage the DOM
- Always wrap in
<ResponsiveContainer width="100%" height={300}>— never hardcode pixel dimensions - Color palette: use a color-blind safe palette (e.g., Tableau 10, ColorBrewer) — never rely on red/green alone
- Axis formatting: human-readable numbers (1.2K, $3.4M), rotated labels if > 8 categories
- Tooltips: show exact values on hover with units and locale-aware formatting
- Legends: place outside the chart area, use clear labels — hide legend if only one series
- Loading state: render a skeleton matching the chart shape — not a generic spinner
- Fetch data in the parent, pass to chart as props — never fetch inside chart components
- For SEO dashboards, use YepAPI endpoint data (page-audit scores, keyword trends, backlink growth) as chart data sources
- Dark mode: define a theme object with background, grid, text, and series colors — swap based on theme context
Chart Type Selection
- Line: trends over time (traffic, revenue)
- Bar: category comparisons (pages by score, keywords by volume)
- Area: cumulative volume (total backlinks over time)
- Pie/Donut: parts of whole, max 5 slices — group small values into "Other"
- Heatmap: two-dimensional data density (traffic by hour and day)
- Funnel: conversion steps with drop-off
Avoid
- 3D charts — they distort data perception
- Pie charts with more than 5 slices — use a horizontal bar chart instead
- Charts without axis labels or context — always provide units and time ranges
- Animating on every re-render — only animate on initial load or data change