Data Visualization Libraries: Domain Explainer#

What Problem Do They Solve?#

Turning raw data into visual insights is complex:

• Mapping values to positions, sizes, colors
• Creating axes, legends, labels
• Handling user interaction (hover, zoom, pan)
• Animations and transitions
• Responsive sizing
• Accessibility

Visualization libraries provide these capabilities so you can focus on your data.

Key Concepts#

Rendering Technologies#

SVG (Scalable Vector Graphics)

<svg>
  <rect x="0" y="0" width="100" height="50" fill="blue" />
  <text x="50" y="25">Label</text>
</svg>

• DOM elements (selectable, stylable with CSS)
• Good for < 1000 elements
• Interactive (click, hover on individual elements)
• Accessible (screen readers can parse)

Canvas

const ctx = canvas.getContext('2d')
ctx.fillRect(0, 0, 100, 50)
ctx.fillText('Label', 50, 25)

• Bitmap rendering (like painting)
• Handles 1000-50000 elements
• No individual element access
• Less accessible

WebGL

• GPU-accelerated 3D/2D
• Handles 50000+ elements
• Complex setup
• Used by ECharts-GL, deck.gl

Performance Rule of Thumb#

Scales#

Scales map data values to visual values:

// Linear scale: 0-100 → 0-500px
const scale = d3.scaleLinear()
  .domain([0, 100])    // Data range
  .range([0, 500])     // Pixel range

scale(50)  // → 250px

Types of scales:

• Linear: Continuous numeric (temperature, sales)
• Band: Discrete categories (months, products)
• Time: Dates and times
• Log: Exponential data
• Color: Values to colors

Axes#

Visual representation of scales:

• Tick marks at regular intervals
• Labels for values
• Title describing the dimension
• Grid lines for reading values

Data Binding#

The core concept: connecting data to visual elements.

// D3 approach
svg.selectAll('rect')
  .data([10, 20, 30])
  .join('rect')
  .attr('height', d => d * 10)

// React approach
data.map(d => <rect height={d * 10} />)

Marks#

Visual primitives that represent data:

• Points: Scatter plots
• Lines: Time series
• Bars: Comparisons
• Areas: Cumulative values
• Arcs: Part-to-whole (pie, donut)

Channels#

Visual properties that encode data:

• Position: x, y coordinates (most accurate)
• Length/Size: Bar height, circle radius
• Color: Hue, saturation, lightness
• Shape: Triangle, square, circle
• Angle: Pie slices (hard to compare)

Chart Types#

High-Level vs Low-Level Libraries#

High-Level (Recharts, Chart.js, Nivo)#

// Tell library WHAT to draw
<LineChart data={data}>
  <Line dataKey="sales" />
</LineChart>

Pros:

• Fast development
• Built-in interactivity
• Consistent styling

Cons:

• Limited customization
• Opinionated design

Low-Level (D3, visx)#

// Tell library HOW to draw
const scale = scaleLinear().domain([0, 100]).range([0, 500])
{data.map(d => <circle cx={scale(d.x)} cy={scale(d.y)} r={5} />)}

Pros:

• Complete control
• Any visualization possible

Cons:

• More code
• Steeper learning curve

React Integration Patterns#

Pattern 1: Library handles everything#

<LineChart data={data} />

Libraries: Recharts, Victory, Nivo

Pattern 2: D3 for math, React for DOM#

const scale = d3.scaleLinear().domain([0, 100]).range([0, 500])
{data.map(d => <rect height={scale(d.value)} />)}

Libraries: visx

Pattern 3: D3 takes over DOM (anti-pattern in React)#

useEffect(() => {
  d3.select(ref.current)
    .selectAll('rect')
    .data(data)
    .join('rect')
}, [data])

Problem: React doesn’t know about DOM changes

Responsive Design#

Charts must adapt to container size:

// Recharts
<ResponsiveContainer width="100%" height={300}>
  <LineChart />
</ResponsiveContainer>

// Chart.js
options: { responsive: true }

// DIY
const { width } = useContainerSize(ref)

Interactivity#

Common interactive features:

• Tooltip: Information on hover
• Legend: Show/hide series
• Zoom: Focus on region
• Pan: Navigate large datasets
• Brush: Select range
• Click: Drill down

Animation#

Smooth transitions improve comprehension:

// Recharts (built-in)
<Line animationDuration={500} />

// visx + react-spring
const spring = useSpring({ y: targetY })
<animated.rect y={spring.y} />

Accessibility#

Charts should be accessible:

• Alt text for images (Canvas)
• ARIA labels for SVG elements
• Keyboard navigation
• Color contrast
• Screen reader descriptions

SVG is inherently more accessible than Canvas.

Common Patterns#

Composable Charts#

Combine multiple chart types:

<ComposedChart>
  <Bar dataKey="sales" />
  <Line dataKey="trend" />
  <Area dataKey="forecast" />
</ComposedChart>

Faceted Charts (Small Multiples)#

Same chart repeated for categories:

{categories.map(cat => (
  <LineChart key={cat} data={dataByCategory[cat]} />
))}

Connected Charts#

Linked brushing across charts:

// Selecting in one chart highlights in another
const [selection, setSelection] = useState(null)

Common Misconceptions#

“More chart types = better library”#

Most dashboards use 3-4 chart types. Focus on those, not variety.

“D3 is the best because it’s most powerful”#

Power comes with complexity. For standard charts, high-level libraries are better.

“Canvas is always faster than SVG”#

Under 1000 elements, the difference is negligible. SVG is easier to work with.

“3D charts are impressive”#

3D usually makes data harder to read. Use sparingly and purposefully.

“Pie charts are bad”#

Pie charts are fine for 2-5 slices showing part-to-whole. They’re overused, not inherently bad.

Evolution of the Space#

2011: D3.js Released#

Mike Bostock creates D3, establishing the foundation.

2015-2018: Wrapper Libraries#

Recharts, Victory, Nivo wrap D3 for React.

2020: visx (Airbnb)#

Bridge between D3 control and React patterns.

2025 Trends#

• Recharts dominates React (9M downloads)
• Canvas/WebGL for performance
• AI-assisted chart generation emerging
• Accessibility focus increasing

Last Updated: 2025-12-12 Related Research: 1.111 (State Management), 1.113 (UI Components), 1.115 (Forms)

1.116 Data Visualization Libraries - S1 Rapid Discovery#

Quick Decision Guide#

2025 Landscape#

Weekly Downloads (npm)#

Recharts:    ███████████████████████████████████  9M
D3.js:       █████████████████████████            4.5M
Chart.js:    ████████████████████                 3M
ECharts:     ███████████                          1M
Nivo:        ███                                  500K
visx:        ██                                   350K
Victory:     ██                                   284K

GitHub Stars#

D3.js:       ████████████████████████████████████████████████  108K
Chart.js:    ██████████████████████████████████████            64K
ECharts:     ████████████████████████████████████              61K
Recharts:    █████████████████████████                         25.6K
visx:        ███████████████████                               19K
Nivo:        ██████████████                                    13.6K
Victory:     ███████████                                       11.2K

The Default Choice: Recharts#

For most React dashboards, Recharts is the answer:

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
]

function Chart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  )
}

Why Recharts wins:

• 9M weekly downloads (32x more than next React-specific library)
• Declarative JSX API
• Built on D3 (solid math)
• Great TypeScript support
• Active maintenance

When NOT to Use Recharts#

Library Tiers#

Tier 1: High-Level React (Easiest)#

Tier 2: Low-Level React (More Control)#

Tier 3: Framework Agnostic (Maximum Power)#

Rendering: SVG vs Canvas vs WebGL#

Rule of thumb:

• Under 1,000 points → SVG (Recharts, Victory)
• 1,000-50,000 points → Canvas (Chart.js, ECharts)
• 50,000+ points → WebGL (ECharts with GL)

Sources#

• Best React Chart Libraries 2025 - LogRocket
• npm trends: nivo vs recharts vs victory
• visx - Airbnb
• Apache ECharts

Chart.js#

“Simple yet flexible JavaScript charting library.”

Quick Facts#

Why Chart.js?#

Chart.js is the simplest way to add charts to any project:

1. Tiny: ~60KB gzipped (with tree-shaking)
2. Fast: Canvas rendering
3. Simple API: Works in minutes
4. Framework agnostic: Works anywhere
5. Huge ecosystem: 100s of plugins

Core Concept: Canvas Performance#

Chart.js renders to Canvas (not SVG):

• Faster for 1000+ points
• Lower memory usage
• Smaller file size
• No DOM bloat

Trade-off: Can’t select/style individual elements with CSS.

React Integration#

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'
import { Line } from 'react-chartjs-2'

// Register components
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

function LineChart() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      {
        label: 'Sales',
        data: [65, 59, 80, 81],
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
      },
    ],
  }

  const options = {
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      title: { display: true, text: 'Monthly Sales' },
    },
  }

  return <Line data={data} options={options} />
}

Chart Types#

Built-in (8 types):

• Line, Bar, Pie, Doughnut
• Radar, Polar Area
• Bubble, Scatter

Key Features#

Responsive by Default#

options: {
  responsive: true,
  maintainAspectRatio: true,
}

Animations#

options: {
  animation: {
    duration: 1000,
    easing: 'easeOutQuart',
  },
}

Plugins#

import zoomPlugin from 'chartjs-plugin-zoom'
ChartJS.register(zoomPlugin)

options: {
  plugins: {
    zoom: {
      zoom: { wheel: { enabled: true } },
      pan: { enabled: true },
    },
  },
}

Tree-Shaking (v3+)#

Only import what you need:

// Full bundle (~60KB)
import Chart from 'chart.js/auto'

// Tree-shaken (~20KB for simple line chart)
import { Chart, LineElement, PointElement, LineController, CategoryScale, LinearScale } from 'chart.js'
Chart.register(LineElement, PointElement, LineController, CategoryScale, LinearScale)

Limitations#

1. Limited chart types: 8 built-in (vs 20+ in ECharts)
2. Less customizable: No arbitrary shapes
3. Canvas limitations: Can’t CSS style elements
4. No geographic maps: Need plugins

Chart.js vs Alternatives#

When to Use Chart.js#

Choose Chart.js when:

• Need quick, simple charts
• Bundle size matters
• Using vanilla JS or any framework
• Standard chart types sufficient
• Want lots of plugin options

Choose alternatives when:

• Need React-first → Recharts
• Need 10K+ points → ECharts
• Need custom visualizations → visx/D3

Resources#

• Official Docs
• GitHub
• react-chartjs-2
• Plugin Directory

Data Visualization Libraries - Comparison Matrix#

Quantitative Comparison#

Feature Matrix#

Rendering Technology#

Performance Comparison#

Data points vs render time (approximate):

100 points:    SVG ██  Canvas ██  WebGL ██  (all fast)
1,000 points:  SVG ████  Canvas ██  WebGL ██
10,000 points: SVG █████████████  Canvas ████  WebGL ██
100,000 points: SVG (fails)  Canvas ████████  WebGL ████

Decision Matrix by Use Case#

Standard Dashboard Charts#

Large Datasets (1000+ points)#

Custom Visualizations#

Cross-Platform (React + React Native)#

Enterprise Requirements#

Bundle Size Comparison#

Approximate bundle sizes (gzipped):

D3 (full):        ████████████████████████████  ~80KB
ECharts (full):   ██████████████████████████    ~70KB
Recharts:         ██████████████████████        ~60KB
Chart.js (full):  ████████████████              ~45KB
Nivo (line):      ██████████████                ~40KB
visx (bar):       ████████                      ~25KB
Chart.js (tree):  ██████                        ~20KB
Victory (line):   ████████                      ~25KB

Migration Paths#

From Chart.js to React#

• Use react-chartjs-2 wrapper
• Or switch to Recharts for React-first DX

From Recharts to More Power#

• Add visx for custom components
• Or ECharts for performance

From D3 to React#

• Use visx (D3 concepts, React components)
• Or Recharts for simplicity

Quick Reference#

“I need charts quickly”#

→ Recharts (React) or Chart.js (any)

“I have lots of data”#

→ ECharts (Canvas/WebGL)

“I need full control”#

→ D3 (direct) or visx (React)

“I’m building React + React Native”#

→ Victory

“I need server-rendered charts”#

→ Nivo

“I need commercial support”#

→ Highcharts (paid license)

D3.js#

“Data-Driven Documents: Bring data to life using SVG, Canvas, and HTML.”

Quick Facts#

What Is D3?#

D3.js is the foundation of most visualization libraries. It’s not a charting library - it’s a toolkit for building any visualization you can imagine.

Libraries built on D3:

• Recharts, Nivo, Victory
• visx (Airbnb)
• Observable Plot
• nvd3, c3

Why D3 Is Unique#

D3 gives you complete control:

• Binds data to DOM elements
• Calculates scales, axes, layouts
• Handles transitions and animations
• Supports any output (SVG, Canvas, WebGL)

Basic Concept: Selections & Data Binding#

import * as d3 from 'd3'

// Select elements
const svg = d3.select('#chart')

// Bind data to elements
const data = [10, 20, 30, 40, 50]

svg.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('width', d => d * 10)
  .attr('height', 30)
  .attr('y', (d, i) => i * 35)
  .attr('fill', 'steelblue')

D3’s Power: Scales & Axes#

// Create scale
const xScale = d3.scaleLinear()
  .domain([0, 100])      // Data range
  .range([0, 500])       // Pixel range

// Create axis
const xAxis = d3.axisBottom(xScale)

// Apply axis
svg.append('g')
  .attr('transform', 'translate(0, 200)')
  .call(xAxis)

Common D3 Modules#

D3 + React: The Challenge#

D3 and React both want to control the DOM:

// WRONG: D3 manipulates DOM, React doesn't know
useEffect(() => {
  d3.select(ref.current)
    .selectAll('rect')
    .data(data)
    .join('rect')
    // React can't track these changes
}, [data])

Solutions:#

1. D3 for math, React for DOM (Recommended)

// D3 calculates, React renders
const scale = d3.scaleLinear().domain([0, 100]).range([0, 500])

return (
  <svg>
    {data.map((d, i) => (
      <rect key={i} width={scale(d)} height={30} y={i * 35} />
    ))}
  </svg>
)

2. Use visx (Best of both worlds)

import { scaleLinear } from '@visx/scale'
import { AxisBottom } from '@visx/axis'

// visx wraps D3 in React components

When to Use D3 Directly#

Use D3 when:

• Need custom visualization (no library covers it)
• Building your own chart library
• Need maximum performance control
• Creating interactive data art
• Force-directed graphs, network diagrams

Don’t use D3 when:

• Need standard charts (bar, line, pie) → Recharts
• Want fast development → Any high-level library
• Team isn’t D3-experienced → visx

Learning Curve#

D3 has a steep learning curve:

Resources#

• Official Docs
• GitHub
• Observable Examples
• D3 Graph Gallery

Apache ECharts#

“An open-source JavaScript visualization library.”

Quick Facts#

Why ECharts?#

ECharts is the performance champion for large datasets:

1. Canvas/WebGL: Handles 10K-100K+ data points
2. Feature-rich: 20+ chart types, maps, 3D
3. Enterprise-ready: Used by major companies
4. Mobile-optimized: Small, modular bundle

When to Choose ECharts#

React Integration#

// Using echarts-for-react wrapper
import ReactECharts from 'echarts-for-react'

function Chart() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70],
        type: 'bar',
      },
    ],
  }

  return <ReactECharts option={option} />
}

Note: The echarts-for-react wrapper is somewhat outdated. For production, consider a custom wrapper:

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

function EChart({ option }) {
  const ref = useRef(null)
  const chartRef = useRef(null)

  useEffect(() => {
    chartRef.current = echarts.init(ref.current)
    return () => chartRef.current?.dispose()
  }, [])

  useEffect(() => {
    chartRef.current?.setOption(option)
  }, [option])

  return <div ref={ref} style={{ width: '100%', height: 400 }} />
}

Configuration-Based API#

ECharts uses a declarative options object:

const option = {
  title: { text: 'Sales Report' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['Sales', 'Returns'] },
  xAxis: { type: 'category', data: months },
  yAxis: { type: 'value' },
  series: [
    { name: 'Sales', type: 'line', data: salesData },
    { name: 'Returns', type: 'bar', data: returnsData },
  ],
}

Chart Types#

ECharts supports 20+ chart types:

Standard:

• Line, Bar, Pie, Scatter
• Radar, Heatmap, Treemap
• Candlestick, Boxplot

Advanced:

• Sankey, Sunburst, Graph (network)
• Map (geographic)
• Parallel coordinates
• Funnel, Gauge

3D (with ECharts-GL):

• 3D Bar, Line, Scatter
• Surface, Globe
• Flow

Performance: Large Datasets#

// Enable large mode for 10K+ points
series: [{
  type: 'scatter',
  large: true,
  largeThreshold: 2000,
  data: largeDataset // 100K points OK
}]

// For 100K+ points, use WebGL
series: [{
  type: 'scatterGL', // Requires echarts-gl
  data: massiveDataset
}]

Limitations#

1. Complex API: Many options to learn
2. React wrapper outdated: May need custom integration
3. Bundle size: Full library is large (use modular imports)
4. Styling: Less flexible than D3/visx

ECharts vs Alternatives#

Resources#

• Official Docs
• Examples
• GitHub
• echarts-for-react

Nivo#

“Supercharged React dataviz components, built on top of D3.”

Quick Facts#

What Sets Nivo Apart?#

Nivo offers unique features not found in other React chart libraries:

1. Server-Side Rendering: API for rendering charts on server
2. Multiple renderers: SVG, Canvas, and HTML
3. Theming: Deep theme customization
4. Motion: Built-in smooth animations
5. Patterns & gradients: Decorative fills

Server-Side Rendering (Unique Feature)#

Nivo can render charts on the server via HTTP API:

# Generate chart image via API
curl "https://nivo.rocks/r/line/svg?width=800&height=400&data=[...]"

Use cases:

• Email reports with embedded charts
• Static site generation
• PDF generation
• Social media previews

Chart Types#

Nivo has excellent variety:

Standard:

• Line, Bar, Pie, Area
• Scatter, Heatmap

Advanced:

• Chord diagram
• Sankey
• Network (force-directed)
• Treemap, Sunburst
• Waffle
• Bump chart
• Calendar heatmap
• Radar, Funnel

Basic Usage#

import { ResponsiveLine } from '@nivo/line'

const data = [
  {
    id: 'sales',
    data: [
      { x: 'Jan', y: 100 },
      { x: 'Feb', y: 200 },
      { x: 'Mar', y: 150 },
    ],
  },
]

function Chart() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveLine
        data={data}
        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}
        axisBottom={{ legend: 'Month' }}
        axisLeft={{ legend: 'Sales' }}
        pointSize={10}
        useMesh={true}
        legends={[
          {
            anchor: 'bottom-right',
            direction: 'column',
            translateX: 100,
            itemWidth: 80,
            itemHeight: 20,
          },
        ]}
      />
    </div>
  )
}

Theming#

Nivo supports deep theming:

const theme = {
  background: '#1a1a2e',
  textColor: '#eee',
  fontSize: 12,
  axis: {
    domain: { line: { stroke: '#777' } },
    ticks: { text: { fill: '#eee' } },
  },
  grid: { line: { stroke: '#333' } },
  legends: { text: { fill: '#eee' } },
}

<ResponsiveLine theme={theme} {...props} />

Patterns & Gradients#

Unique decorative features:

<ResponsiveBar
  defs={[
    {
      id: 'dots',
      type: 'patternDots',
      background: 'inherit',
      color: '#38bcb2',
      size: 4,
    },
  ]}
  fill={[{ match: { id: 'sales' }, id: 'dots' }]}
/>

Renderer Options#

Choose based on your needs:

import { ResponsiveBar } from '@nivo/bar'       // SVG
import { ResponsiveBarCanvas } from '@nivo/bar' // Canvas

Limitations#

1. Smaller community: Less tutorials, fewer Stack Overflow answers
2. Bundle size: Larger than Recharts
3. Learning curve: Many options to configure
4. React only: No vanilla JS option

Nivo vs Recharts#

When to Use Nivo#

Choose Nivo when:

• Need server-side chart rendering
• Want advanced chart types (chord, sankey, bump)
• Need deep theming
• Want patterns/gradients
• Building data-heavy applications

Choose Recharts when:

• Want larger community support
• Need simple, quick setup
• Standard charts sufficient

Resources#

• Official Docs
• GitHub
• Interactive Docs
• Storybook

Recharts#

“A composable charting library built on React components.”

Quick Facts#

Why Recharts Dominates#

Recharts is the default choice for React charts:

1. Most popular: 9M weekly downloads (32x more than Nivo)
2. Declarative: JSX-based API feels like React
3. D3 foundation: Solid math under the hood
4. TypeScript: Excellent type support
5. Maintained: Active development

Core Concept: Composable Components#

Each chart element is a React component:

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'

const data = [
  { month: 'Jan', sales: 400, returns: 24 },
  { month: 'Feb', sales: 300, returns: 13 },
  { month: 'Mar', sales: 600, returns: 42 },
]

function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
        <Line type="monotone" dataKey="returns" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  )
}

Chart Types#

Recharts includes all common chart types:

• LineChart, AreaChart
• BarChart (horizontal/vertical)
• PieChart, RadarChart
• ScatterChart
• ComposedChart (mix types)
• Treemap, Sankey

Key Components#

ResponsiveContainer#

Always wrap charts for responsiveness:

<ResponsiveContainer width="100%" height={300}>
  <LineChart>...</LineChart>
</ResponsiveContainer>

Tooltip#

Built-in hover information:

<Tooltip
  formatter={(value, name) => [`$${value}`, name]}
  labelFormatter={(label) => `Month: ${label}`}
/>

Legend#

Chart legend with click-to-hide:

<Legend onClick={(data) => console.log(data)} />

Reference Lines/Areas#

Annotate charts:

<ReferenceLine y={500} stroke="red" label="Target" />
<ReferenceArea y1={200} y2={300} fill="yellow" fillOpacity={0.3} />

Customization#

Custom Shapes#

const CustomDot = ({ cx, cy, value }) => (
  <circle cx={cx} cy={cy} r={value > 500 ? 8 : 4} fill="#8884d8" />
)

<Line dot={<CustomDot />} />

Custom Tooltips#

const CustomTooltip = ({ active, payload, label }) => {
  if (!active || !payload) return null
  return (
    <div className="tooltip">
      <p>{label}: ${payload[0].value}</p>
    </div>
  )
}

<Tooltip content={<CustomTooltip />} />

Limitations#

1. SVG only: Slows with 1000+ data points
2. Limited chart types: No network graphs, force layouts
3. Animation limits: Less control than D3
4. No 3D: Flat charts only

When to Use Recharts#

Choose Recharts when:

• Building React dashboards
• Need standard chart types
• Data points < 1000
• Want fast development

Choose alternatives when:

• Need 1000+ data points → ECharts
• Need custom visualizations → visx/D3
• Need cross-platform → Victory
• Need 3D → Plotly

Resources#

• Official Docs
• GitHub
• Examples

Data Visualization Library Recommendation Guide#

Quick Decision Tree#

Start Here
│
├─ What framework?
│  ├─ React → Continue below
│  ├─ React Native → Victory
│  ├─ Vue/Angular/Vanilla → Chart.js or ECharts
│  └─ Any (maximum control) → D3.js
│
├─ React: How many data points?
│  ├─ < 500 points → Recharts ✓
│  ├─ 500 - 5000 → Chart.js or Recharts
│  └─ > 5000 → ECharts (Canvas/WebGL)
│
├─ React: Standard or custom charts?
│  ├─ Standard (bar, line, pie) → Recharts ✓
│  ├─ Custom (network, force) → visx
│  └─ Many chart types → Nivo
│
└─ Special requirements?
   ├─ Server-side rendering → Nivo
   ├─ Geographic maps → ECharts or visx
   ├─ 3D charts → ECharts-GL
   └─ Commercial support → Highcharts

The Default: Recharts#

For most React dashboards, use Recharts:

npm install recharts

Why:

• 9M weekly downloads (dominant)
• Declarative JSX API
• Great TypeScript support
• Built on D3 (solid math)
• Active maintenance

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Line dataKey="value" stroke="#8884d8" />
  </LineChart>
</ResponsiveContainer>

Recommendations by Scenario#

1. Standard React Dashboard#

Recommended: Recharts

• Line charts, bar charts, pie charts
• Interactive tooltips, legends
• Responsive design

npm install recharts

2. Large Datasets (1000+ data points)#

Recommended: ECharts

SVG-based libraries (Recharts, Victory) struggle with 1000+ points. ECharts uses Canvas/WebGL:

npm install echarts echarts-for-react

Or for 50K+ points, use WebGL:

series: [{ type: 'scatterGL', data: massiveDataset }]

3. Custom Visualizations#

Recommended: visx

Need network graphs, custom force layouts, or unusual charts? visx gives D3 power with React idioms:

npm install @visx/scale @visx/shape @visx/axis

Pick only packages you need (excellent tree-shaking).

4. Cross-Platform (React + React Native)#

Recommended: Victory

Same API works on web and mobile:

// Web
npm install victory

// Mobile
npm install victory-native react-native-svg

Same code, both platforms.

5. Server-Side Rendered Charts#

Recommended: Nivo

Unique SSR API for generating charts on server:

npm install @nivo/line @nivo/bar

Use case: Email reports, PDFs, static sites.

6. Simple Charts, Any Framework#

Recommended: Chart.js

Fastest setup, works everywhere:

npm install chart.js

For React: npm install react-chartjs-2

7. Enterprise with Support Requirements#

Recommended: Highcharts (Commercial)

• Professional support
• Accessibility certified
• Long-term maintenance

Requires commercial license for business use.

What NOT to Do#

Don’t Use D3 for Standard Charts#

D3 is a low-level toolkit. For bar/line/pie charts, use Recharts - it uses D3 under the hood anyway.

Don’t Use SVG Libraries for Large Data#

SVG struggles past ~1000 data points. Switch to Canvas (Chart.js, ECharts).

Don’t Build Your Own Charting Library#

Unless you have specific needs, existing libraries handle edge cases you haven’t thought of.

Library Tiers#

Tier 1: Start Here#

Tier 2: Specific Needs#

Tier 3: Special Cases#

Performance Summary#

Final Recommendations#

For Most React Projects#

Recharts - Dominant, simple, effective

For Large Datasets#

ECharts - Canvas/WebGL performance

For Custom Visualizations#

visx - D3 power, React idioms

For Cross-Platform#

Victory - Only real option

For Enterprise#

Highcharts - Commercial support (or ECharts)

Victory#

“React.js components for modular charting and data visualization.”

Quick Facts#

Why Victory?#

Victory’s unique value: Cross-platform (React + React Native)

Same API works on web and mobile:

// Web
import { VictoryLine } from 'victory'

// React Native
import { VictoryLine } from 'victory-native'

When to Choose Victory#

Basic Usage#

import {
  VictoryChart,
  VictoryLine,
  VictoryAxis,
  VictoryTheme,
} from 'victory'

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
]

function Chart() {
  return (
    <VictoryChart theme={VictoryTheme.material}>
      <VictoryLine data={data} />
      <VictoryAxis />
    </VictoryChart>
  )
}

Chart Types#

Standard charts:

• Line, Bar, Area, Scatter
• Pie, Polar
• Candlestick, ErrorBar
• Histogram, BoxPlot

Composable Architecture#

Victory’s strength is composition:

<VictoryChart>
  {/* Combine any elements */}
  <VictoryBar data={barData} />
  <VictoryLine data={lineData} />
  <VictoryScatter data={scatterData} />

  {/* Add annotations */}
  <VictoryAxis label="X Axis" />
  <VictoryAxis dependentAxis label="Y Axis" />

  {/* Add interactivity */}
  <VictoryTooltip />
  <VictoryZoomContainer />
</VictoryChart>

Theming#

Built-in themes + custom:

import { VictoryTheme } from 'victory'

// Built-in
<VictoryChart theme={VictoryTheme.material} />
<VictoryChart theme={VictoryTheme.grayscale} />

// Custom
const customTheme = {
  axis: {
    style: {
      axis: { stroke: '#ccc' },
      tickLabels: { fill: '#666' },
    },
  },
  line: {
    style: {
      data: { stroke: '#c43a31' },
    },
  },
}

<VictoryChart theme={customTheme} />

Animations#

Built-in smooth transitions:

<VictoryBar
  animate={{
    duration: 500,
    onLoad: { duration: 500 },
  }}
  data={data}
/>

React Native Support#

// Install
npm install victory-native react-native-svg

// Use
import { VictoryPie } from 'victory-native'

function MobileChart() {
  return (
    <VictoryPie
      data={[
        { x: 'Cats', y: 35 },
        { x: 'Dogs', y: 40 },
        { x: 'Birds', y: 25 },
      ]}
    />
  )
}

Limitations#

1. SVG only: Can slow with large datasets
2. Smaller ecosystem: Fewer plugins than Chart.js
3. Less popular: 284K vs 9M (Recharts)
4. Learning curve: API different from other libraries

Victory vs Alternatives#

When to Use Victory#

Choose Victory when:

• Building React + React Native app
• Want same charting code everywhere
• Need composable chart system

Choose alternatives when:

• Web only → Recharts (more popular)
• Large datasets → ECharts/Chart.js
• Custom visualizations → visx/D3

Resources#

• Official Docs
• GitHub
• victory-native

visx#

“A collection of expressive, low-level visualization primitives for React.”

Quick Facts#

What Is visx?#

visx (formerly vx) is Airbnb’s answer to “D3 + React”: it wraps D3’s calculation power in React components, giving you the best of both worlds.

Key insight: D3 for math, React for DOM.

Why visx?#

The visx Philosophy#

1. Un-opinionated: Bring your own styles, animations, state
2. Modular: 30+ packages, use what you need
3. Low-level: Primitives, not pre-made charts
4. D3 hidden: Use D3 power without learning D3

Package Structure#

@visx/axis        - Axes (bottom, left, top, right)
@visx/grid        - Grid lines
@visx/group       - SVG group element
@visx/scale       - D3 scales wrapped
@visx/shape       - Lines, bars, areas, arcs
@visx/tooltip     - Tooltip primitives
@visx/zoom        - Zoom behavior
@visx/brush       - Selection brush
@visx/geo         - Geographic maps
@visx/hierarchy   - Trees, treemaps
@visx/network     - Force-directed graphs
@visx/heatmap     - Heatmaps
...and more

Basic Example#

import { scaleLinear, scaleBand } from '@visx/scale'
import { Bar } from '@visx/shape'
import { Group } from '@visx/group'
import { AxisBottom, AxisLeft } from '@visx/axis'

const data = [
  { letter: 'A', frequency: 0.08 },
  { letter: 'B', frequency: 0.15 },
  { letter: 'C', frequency: 0.12 },
]

const width = 500
const height = 300
const margin = { top: 20, right: 20, bottom: 40, left: 40 }

function BarChart() {
  const xMax = width - margin.left - margin.right
  const yMax = height - margin.top - margin.bottom

  const xScale = scaleBand({
    domain: data.map(d => d.letter),
    range: [0, xMax],
    padding: 0.4,
  })

  const yScale = scaleLinear({
    domain: [0, Math.max(...data.map(d => d.frequency))],
    range: [yMax, 0],
  })

  return (
    <svg width={width} height={height}>
      <Group left={margin.left} top={margin.top}>
        {data.map(d => (
          <Bar
            key={d.letter}
            x={xScale(d.letter)}
            y={yScale(d.frequency)}
            width={xScale.bandwidth()}
            height={yMax - yScale(d.frequency)}
            fill="#6c5ce7"
          />
        ))}
        <AxisBottom scale={xScale} top={yMax} />
        <AxisLeft scale={yScale} />
      </Group>
    </svg>
  )
}

When to Choose visx#

Choose visx when:

• Need custom visualizations beyond Recharts
• Want D3 power with React idioms
• Building a reusable chart library
• Need network graphs, hierarchies, geo maps
• Care about bundle size (pick only what you need)

Choose Recharts instead when:

• Need standard charts quickly
• Team less experienced with visualization
• Don’t need customization

visx vs D3 vs Recharts#

Resources#

• Official Docs
• GitHub
• Gallery
• Airbnb Blog Post

S2-comprehensive: Technical Deep-Dive#

Focus#

This pass analyzes the internal architecture, algorithms, and implementation details of data visualization libraries. While S1 answered “WHICH library?”, S2 answers “HOW does it work?”

Analysis Framework#

For each library, we examine:

1. Architecture#

• Rendering pipeline (SVG/Canvas/WebGL)
• Component hierarchy and composition
• Data flow and transformation
• Memory management

2. Algorithms#

• Scale calculations (linear, log, time, band)
• Layout algorithms (force-directed, tree, arc)
• Interpolation methods
• Animation timing functions

3. Performance#

• Rendering benchmarks (elements/second)
• Bundle size and tree-shaking
• Memory usage patterns
• Optimization strategies

4. API Design#

• Programming paradigms (declarative vs imperative)
• Type safety and TypeScript support
• Extension points and customization
• Error handling

5. Integration Patterns#

• Framework-specific bindings (React, Vue, Angular)
• SSR compatibility
• Build tool requirements
• Testing strategies

Libraries Analyzed#

1. Recharts - Composable React components
2. D3.js - Low-level DOM manipulation
3. Chart.js - Imperative Canvas API
4. ECharts - Configuration-driven rendering
5. Nivo - React wrapper with SSR
6. visx - React primitives for D3
7. Victory - Cross-platform React Native

Key Insights from S2#

Rendering Pipeline Trade-offs#

SVG Pipeline (Recharts, Victory, Nivo)

Data → Scale → React Component → SVG Element → DOM

• Each data point becomes a DOM node
• Accessible, inspectable, stylable
• Hits performance wall at ~1000 elements

Canvas Pipeline (Chart.js, ECharts)

Data → Scale → Canvas Context → Bitmap

• All points rendered as pixels
• No individual element access
• Handles 1000-50000 points smoothly

WebGL Pipeline (ECharts-GL)

Data → Scale → Shader → GPU → Frame Buffer

• GPU-accelerated geometry
• Handles 50000+ points
• Complex setup, harder debugging

React Integration Patterns#

Pattern 1: Library Owns DOM (Recharts, Nivo)

<LineChart data={data}>
  <Line dataKey="value" />
</LineChart>

• Library renders SVG elements
• React controls when to render
• Easy to use, limited flexibility

Pattern 2: D3 Math, React Rendering (visx)

const scale = scaleLinear().domain([0, 100]).range([0, 500])
return data.map(d => <circle cx={scale(d.x)} r={5} />)

• D3 for calculations only
• React renders DOM
• More control, more code

Pattern 3: D3 Controls DOM (Anti-pattern)

useEffect(() => {
  d3.select(ref.current).selectAll('rect').data(data).join('rect')
}, [data])

• D3 mutates DOM directly
• React unaware of changes
• Breaks React’s model

Performance Bottlenecks#

1. SVG Layout Thrashing - Reading/writing layout repeatedly
2. Animation Frame Budget - Exceeding 16ms per frame
3. Memory Leaks - Not cleaning up event listeners
4. Re-render Cascades - Unnecessary recalculations

Comparison by Dimension#

See feature-comparison.md for detailed side-by-side analysis.

Chart.js - Technical Architecture#

Core Philosophy#

Chart.js is an imperative, configuration-driven Canvas charting library. You provide a config object, it renders to Canvas.

new Chart(ctx, {
  type: 'line',
  data: { /* ... */ },
  options: { /* ... */ }
})

Rendering Architecture#

Canvas-First Design#

Unlike SVG libraries (Recharts, D3), Chart.js renders to Canvas:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

// Chart.js draws pixels directly
ctx.fillRect(x, y, width, height)
ctx.stroke()

Implications:

• Fast for 1000-50000 data points
• No individual element access (all pixels)
• Less accessible (no DOM nodes for screen readers)
• Harder to customize (no CSS styling)

Rendering Pipeline#

Config Object → Chart Instance → Rendering Engine → Canvas Context → Pixels

Detailed steps:

1. Parse config - Validate chart type, data, options
2. Calculate layout - Determine axis positions, label spacing
3. Generate scales - Map data values to pixel coordinates
4. Render elements - Draw axes, grid, data points, labels
5. Register interactions - Set up hover/click handlers
6. Animation loop - Interpolate values over time

Chart Types#

Built-in chart types (extensible):

Basic#

• line - Time series, trends
• bar - Comparisons (vertical/horizontal)
• pie / doughnut - Part-to-whole
• radar - Multivariate data
• polarArea - Circular bar chart
• scatter - X-Y relationships
• bubble - X-Y-Z (size as 3rd dimension)

Mixed#

{
  type: 'line',
  data: {
    datasets: [
      { type: 'line', data: [...] },
      { type: 'bar', data: [...] }
    ]
  }
}

Configuration Structure#

new Chart(ctx, {
  type: 'line',

  data: {
    labels: ['Jan', 'Feb', 'Mar'],  // X-axis labels
    datasets: [{
      label: 'Sales',
      data: [10, 20, 15],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.1  // Line curvature
    }]
  },

  options: {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 2,  // width:height ratio

    scales: {
      x: {
        type: 'linear',  // or 'category', 'time', 'logarithmic'
        title: { display: true, text: 'Month' }
      },
      y: {
        beginAtZero: true,
        ticks: { callback: (value) => `$${value}` }
      }
    },

    plugins: {
      legend: { display: true, position: 'top' },
      tooltip: { enabled: true, mode: 'index' },
      title: { display: true, text: 'Sales Dashboard' }
    },

    interaction: {
      mode: 'nearest',  // or 'index', 'point', 'dataset'
      intersect: false
    },

    animation: {
      duration: 1000,
      easing: 'easeInOutQuart'
    }
  }
})

Scale System#

Chart.js has its own scale implementations (not D3).

Scale Types#

1. Linear Scale

scales: {
  y: {
    type: 'linear',
    min: 0,
    max: 100,
    ticks: {
      stepSize: 10,
      callback: (value) => value + '%'
    }
  }
}

2. Logarithmic Scale

scales: {
  y: { type: 'logarithmic' }
}

3. Category Scale (discrete)

scales: {
  x: {
    type: 'category',
    labels: ['A', 'B', 'C']
  }
}

4. Time Scale (requires date-fns or moment.js)

import 'chartjs-adapter-date-fns'

scales: {
  x: {
    type: 'time',
    time: {
      unit: 'day',
      displayFormats: { day: 'MMM d' }
    }
  }
}

Performance Characteristics#

Benchmark Results#

Performance ceiling: ~10,000 points for smooth interaction

Why Canvas is Faster than SVG#

1. No DOM overhead - Single Canvas element, not 1000s of SVG nodes
2. Direct pixel manipulation - Bypasses layout/paint pipeline
3. GPU acceleration - Modern browsers use GPU for Canvas

Optimization Strategies#

1. Data Decimation (built-in)

options: {
  parsing: false,  // Assume data is pre-parsed
  decimation: {
    enabled: true,
    algorithm: 'lttb',  // Largest-Triangle-Three-Buckets
    samples: 500
  }
}

LTTB Algorithm:

• Downsamples 10,000 points → 500 points
• Preserves visual shape
• ~10x performance improvement

2. Disable Animations

options: { animation: false }

3. Reduce Update Frequency

chart.update('none')  // No animation
// vs
chart.update()  // Default animation

Bundle Size#

chart.js: 242 KB (uncompressed)
chart.js: ~60 KB (gzipped)

Tree-shaking: Not supported well

• Must import entire library
• Use auto-tree-shaking bundler (Webpack 5+)

Comparison:

• Recharts: 130 KB gzipped
• Chart.js: 60 KB gzipped ✓ (smaller)

Plugin System#

Chart.js is highly extensible via plugins.

Built-in Plugins#

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  Tooltip,
  Legend
} from 'chart.js'

Chart.register(
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  Tooltip,
  Legend
)

Custom Plugin#

const customPlugin = {
  id: 'customPlugin',

  beforeDraw(chart, args, options) {
    const { ctx, chartArea } = chart
    ctx.fillStyle = 'rgba(255, 0, 0, 0.1)'
    ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height)
  },

  afterDatasetDraw(chart, args, options) {
    // Called after each dataset renders
  }
}

Chart.register(customPlugin)

Plugin hooks:

• beforeInit, afterInit
• beforeUpdate, afterUpdate
• beforeDraw, afterDraw
• beforeDatasetDraw, afterDatasetDraw
• 20+ hooks total

Animation System#

Configuration#

options: {
  animation: {
    duration: 1000,
    easing: 'easeOutQuart',
    delay: (context) => context.dataIndex * 50,  // Stagger
    loop: false,

    // Specific animations
    x: { duration: 2000 },  // X-axis animation
    y: { duration: 1000 }   // Y-axis animation
  }
}

Easing functions:

• Linear: linear
• Ease: easeInQuad, easeOutQuad, easeInOutQuad
• Cubic, Quart, Quint, Expo, Circ, Back, Elastic

Animation Events#

options: {
  onProgress(animation) {
    console.log(`Progress: ${animation.currentStep / animation.numSteps}`)
  },
  onComplete(animation) {
    console.log('Animation finished')
  }
}

Responsive Design#

Auto-Resize#

options: {
  responsive: true,
  maintainAspectRatio: true,
  aspectRatio: 2  // width:height
}

Implementation:

• Uses ResizeObserver (with polyfill)
• Redraws chart on container resize
• Debounced to avoid excessive redraws

Manual Size Control#

chart.resize(width, height)

Interaction Modes#

Hover/Click Behavior#

options: {
  interaction: {
    mode: 'index',      // 'point', 'nearest', 'dataset', 'x', 'y'
    intersect: false,   // Trigger on axis, not just point
    axis: 'x'           // Only consider x-axis distance
  }
}

Modes:

• point - Hover directly over point
• nearest - Closest point to cursor
• index - All points at same x-index
• dataset - All points in dataset
• x / y - Points along axis

Custom Interactions#

canvas.onclick = (evt) => {
  const points = chart.getElementsAtEventForMode(
    evt,
    'nearest',
    { intersect: true },
    false
  )

  if (points.length) {
    const { datasetIndex, index } = points[0]
    console.log(chart.data.datasets[datasetIndex].data[index])
  }
}

Accessibility#

Limitations#

Canvas is inherently less accessible:

• No DOM elements for screen readers
• No keyboard navigation
• Difficult to provide alt text for individual data points

Mitigations#

<canvas aria-label="Sales chart showing upward trend">
  Fallback: Sales increased from $100 in Jan to $300 in Mar
</canvas>

Accessibility plugins:

• chartjs-plugin-a11y-legend
• Adds keyboard navigation
• ARIA labels for data points

React Integration#

react-chartjs-2 (Official Wrapper)#

import { Line } from 'react-chartjs-2'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

function App() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ data: [10, 20, 15] }]
  }

  return <Line data={data} options={{ responsive: true }} />
}

Wrapper handles:

• Canvas element creation
• Chart instance management
• Update/destroy lifecycle
• TypeScript types

TypeScript Support#

Type Coverage: Excellent

import { ChartConfiguration, ChartType } from 'chart.js'

const config: ChartConfiguration<'line'> = {
  type: 'line',
  data: {
    labels: ['A', 'B'],
    datasets: [{
      label: 'Dataset',
      data: [1, 2]
    }]
  }
}

// Custom types
interface CustomDataPoint {
  x: number
  y: number
  label: string
}

const scatterConfig: ChartConfiguration<'scatter', CustomDataPoint[]> = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [
        { x: 1, y: 2, label: 'Point A' },
        { x: 3, y: 4, label: 'Point B' }
      ]
    }]
  }
}

Key Strengths#

1. Canvas performance - Handles 10K points smoothly
2. Simple API - Config object easier than D3
3. Small bundle - 60 KB gzipped
4. Great docs - Comprehensive, well-organized
5. Active maintenance - Regular releases

Key Limitations#

1. Less flexible than D3 - Opinionated chart types
2. Accessibility - Canvas harder for screen readers
3. Customization limits - Harder to style than SVG
4. No React-native API - Imperative, not declarative

When to Use Chart.js#

Ideal for:

• 1,000-10,000 data points
• Framework-agnostic projects (Vue, Angular, vanilla JS)
• Performance-critical dashboards
• Teams prioritizing simplicity

Not ideal for:

• Custom visualizations (use D3)
• React-first projects (Recharts more idiomatic)
• Heavy accessibility requirements (use SVG libraries)

D3.js - Technical Architecture#

Core Philosophy#

D3 = Data-Driven Documents

Unlike other libraries that render charts, D3 provides primitives for binding data to DOM and applying transformations.

// D3 doesn't "render a bar chart"
// D3 gives you tools to create one yourself

d3.select('svg')
  .selectAll('rect')
  .data([10, 20, 30])
  .join('rect')
    .attr('x', (d, i) => i * 25)
    .attr('height', d => d * 10)

Module Architecture#

D3 v7+ is modular - 30+ independent packages:

Data Manipulation#

• d3-array - Statistics (min, max, mean, quantile, bisect)
• d3-collection - Maps, sets, nests
• d3-random - Random number generators

Scales and Axes#

• d3-scale - Map data → visual values
• d3-axis - Generate axis elements
• d3-time - Time intervals, formatting

Shapes and Layouts#

• d3-shape - Line, area, arc, pie generators
• d3-chord - Chord diagrams
• d3-hierarchy - Tree layouts, treemaps, partitions
• d3-force - Force-directed graph layouts
• d3-sankey - Flow diagrams

DOM Manipulation#

• d3-selection - Select and manipulate elements
• d3-transition - Animated transitions
• d3-drag - Drag-and-drop
• d3-zoom - Pan and zoom

Geographic#

• d3-geo - Map projections
• d3-geo-projection - Extended projections

Utilities#

• d3-fetch - Load CSV, JSON, etc.
• d3-format - Number formatting
• d3-interpolate - Interpolation functions
• d3-ease - Easing functions

Selection API (Core Abstraction)#

The Join Pattern#

D3’s fundamental operation: data joins

const data = [10, 20, 30, 40]

d3.select('svg')
  .selectAll('circle')  // Select all circles (even if none exist)
  .data(data)           // Bind data
  .join('circle')       // Create/update/remove elements
    .attr('cx', (d, i) => i * 50)
    .attr('cy', 100)
    .attr('r', d => d)

What .join() does:

1. Enter: Create missing elements (4 data points, 0 circles → create 4)
2. Update: Update existing elements (4 data points, 4 circles → update 4)
3. Exit: Remove extra elements (4 data points, 6 circles → remove 2)

Method Chaining#

D3 uses fluent interface pattern:

selection
  .attr('width', 100)
  .attr('height', 200)
  .style('fill', 'blue')
  .on('click', handler)

Each method returns the selection for chaining.

Scale System#

Scales are pure functions that map input → output.

Scale Types#

1. Continuous Scales

// Linear: y = mx + b
const linear = d3.scaleLinear()
  .domain([0, 100])      // Data space
  .range([0, 500])       // Pixel space

linear(50)  // → 250

// Log: y = log(x)
const log = d3.scaleLog()
  .domain([1, 1000])
  .range([0, 500])

// Power: y = x^k
const power = d3.scalePow().exponent(2)

// Time: handles date arithmetic
const time = d3.scaleTime()
  .domain([new Date(2024, 0, 1), new Date(2024, 11, 31)])
  .range([0, 1000])

2. Sequential Scales (continuous color)

const color = d3.scaleSequential(d3.interpolateViridis)
  .domain([0, 100])

color(50)  // → "rgb(72, 130, 145)"

3. Ordinal Scales (discrete)

const category = d3.scaleOrdinal()
  .domain(['A', 'B', 'C'])
  .range(['red', 'green', 'blue'])

category('A')  // → "red"

4. Band Scales (for bar charts)

const x = d3.scaleBand()
  .domain(['Jan', 'Feb', 'Mar'])
  .range([0, 300])
  .padding(0.1)

x('Jan')        // → 0
x.bandwidth()   // → 96 (width of each band)

Shape Generators#

Generators create SVG path d attributes.

Line Generator#

const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value))
  .curve(d3.curveMonotoneX)  // Smoothing

const pathData = line(data)
// → "M 0,100 L 50,150 L 100,120 ..."

Curve algorithms:

• curveLinear - Straight lines (default)
• curveBasis - B-spline (smooth)
• curveMonotoneX - Monotone cubic (no overshoots)
• curveStep - Step function
• 10+ more curves

Area Generator#

const area = d3.area()
  .x(d => xScale(d.date))
  .y0(height)              // Baseline
  .y1(d => yScale(d.value)) // Top line

// Creates filled area under curve

Arc Generator (Pie/Donut)#

const arc = d3.arc()
  .innerRadius(0)      // 0 = pie, > 0 = donut
  .outerRadius(100)

const pie = d3.pie()
  .value(d => d.value)

const arcs = pie(data)  // Calculates angles
arcs.forEach((d, i) => {
  svg.append('path')
    .attr('d', arc(d))  // arc generates path
    .attr('fill', colors[i])
})

Transition System#

Smooth animations between states.

d3.selectAll('circle')
  .transition()              // Start transition
  .duration(1000)            // 1 second
  .delay((d, i) => i * 100)  // Stagger
  .ease(d3.easeCubicInOut)   // Easing function
  .attr('r', d => newRadius(d))

Easing Functions:

• Linear: easeLinear
• Quadratic: easeQuadIn, easeQuadOut, easeQuadInOut
• Cubic, Quartic, Quintic, Exponential
• Bounce: easeBounce
• Elastic: easeElastic
• Back: easeBack (overshoots then settles)

Transition Chaining:

selection
  .transition().duration(500).attr('opacity', 0)
  .transition().duration(500).attr('height', 0)
  .remove()  // Remove after transitions

Force-Directed Layouts#

For network graphs, node-link diagrams.

const simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(-30))  // Repulsion
  .force('link', d3.forceLink(links).distance(50))    // Attraction
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force('collision', d3.forceCollide().radius(10))   // No overlap

simulation.on('tick', () => {
  // Update node/link positions on each tick
  linkElements.attr('x1', d => d.source.x)
  nodeElements.attr('cx', d => d.x)
})

Forces available:

• forceManyBody - N-body charge (repulsion/attraction)
• forceLink - Spring between linked nodes
• forceCenter - Pull toward center point
• forceCollide - Collision detection
• forceX / forceY - Pull toward axis
• forceRadial - Circular arrangement

Hierarchy Layouts#

For tree structures.

const data = {
  name: 'root',
  children: [
    { name: 'child1', children: [...] },
    { name: 'child2' }
  ]
}

const hierarchy = d3.hierarchy(data)

// Tree layout
const tree = d3.tree().size([width, height])
tree(hierarchy)  // Assigns x, y to each node

// Treemap layout
const treemap = d3.treemap().size([width, height])
treemap(hierarchy.sum(d => d.value))  // Assigns x0, y0, x1, y1

// Partition (sunburst)
const partition = d3.partition()

Performance Characteristics#

Benchmark Results#

Rendering 10,000 circles:

• D3 + SVG: ~150ms (choppy)
• D3 + Canvas: ~15ms (smooth)
• D3 + WebGL: ~2ms (very smooth)

Key insight: D3 itself is fast - SVG is the bottleneck.

Canvas Rendering#

D3 can target Canvas instead of SVG:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

data.forEach(d => {
  ctx.beginPath()
  ctx.arc(xScale(d.x), yScale(d.y), 5, 0, 2 * Math.PI)
  ctx.fill()
})

Trade-off: No DOM elements = no hover events on individual points.

Bundle Size#

d3 (full): 250 KB (uncompressed), ~70 KB gzipped

Modular imports (tree-shaking):
d3-selection: 45 KB → 15 KB gzipped
d3-scale: 85 KB → 25 KB gzipped
d3-shape: 73 KB → 22 KB gzipped

Best practice: Import only what you need

import { scaleLinear } from 'd3-scale'
import { line } from 'd3-shape'

TypeScript Support#

Type Coverage: Excellent (@types/d3)

import { ScaleLinear, Selection } from 'd3'

const scale: ScaleLinear<number, number> = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500])

const svg: Selection<SVGSVGElement, unknown, HTMLElement, any> =
  d3.select<SVGSVGElement, unknown>('svg')

Challenge: Complex generic types for selections.

React Integration Challenges#

Anti-Pattern: D3 Controls DOM#

// DON'T DO THIS
useEffect(() => {
  d3.select(ref.current)
    .selectAll('rect')
    .data(data)
    .join('rect')  // D3 creates/removes elements
}, [data])

Problem: React doesn’t know about DOM changes.

Best Practice: D3 for Math, React for DOM#

// DO THIS
const xScale = scaleLinear().domain([0, 100]).range([0, width])
const yScale = scaleLinear().domain([0, 100]).range([height, 0])

return (
  <svg>
    {data.map(d => (
      <circle
        key={d.id}
        cx={xScale(d.x)}
        cy={yScale(d.y)}
        r={5}
      />
    ))}
  </svg>
)

This is exactly what visx does.

Key Strengths#

1. Maximum flexibility - Can create ANY visualization
2. Modular - Import only what you need
3. Battle-tested - 13 years, 108K GitHub stars
4. Excellent docs - Observable notebooks, examples

Key Limitations#

1. Steep learning curve - Takes weeks to master
2. Verbose - More code than high-level libraries
3. No built-in charts - You build everything from scratch
4. React friction - Doesn’t fit React’s declarative model

When to Use D3#

Ideal for:

• Custom, novel visualizations
• Full creative control needed
• Complex interactions (brushing, linked views)
• Network graphs, force layouts, geo maps

Not ideal for:

• Standard charts (use Recharts)
• Tight deadlines (high-level libs faster)
• Teams new to D3 (steep learning curve)
• React projects (consider visx)

ECharts - Technical Architecture#

Core Philosophy#

ECharts (from Apache/Baidu) is a configuration-driven, enterprise-grade charting library with Canvas/WebGL rendering for massive datasets.

const chart = echarts.init(document.getElementById('container'))
chart.setOption({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'line' }]
})

Rendering Architecture#

Multi-Renderer Support#

ECharts supports Canvas (default) and SVG rendering:

// Canvas (better for large datasets)
const chart = echarts.init(dom, null, { renderer: 'canvas' })

// SVG (better for small datasets, accessibility)
const chart = echarts.init(dom, null, { renderer: 'svg' })

ZRender (Internal Rendering Engine)#

ECharts uses ZRender - a lightweight 2D drawing library:

ECharts Config → ZRender Elements → Canvas/SVG Context → Pixels/DOM

ZRender features:

• Shape primitives (rect, circle, path, text, image)
• Event system (hover, click, drag)
• Animation engine
• Layer management (for performance)

Performance: The Big Data Champion#

Benchmark Results#

ECharts GL (WebGL extension):

import 'echarts-gl'

series: [{
  type: 'scatter3D',  // 3D scatter plot
  data: millionPoints,
  symbolSize: 2
}]

Performance Optimizations#

1. Progressive Rendering

series: [{
  type: 'line',
  data: hugeDataset,
  progressive: 5000,        // Render 5000 points per frame
  progressiveThreshold: 10000  // Enable if > 10K points
}]

2. Sampling

series: [{
  type: 'line',
  data: hugeDataset,
  sampling: 'lttb'  // Largest-Triangle-Three-Buckets
}]

3. Data Zoom (Virtual Scrolling)

dataZoom: [{
  type: 'slider',
  start: 0,
  end: 10  // Show only 10% of data initially
}]

Only visible data is rendered = massive performance gain.

4. Large Mode

series: [{
  type: 'scatter',
  large: true,           // Enable large mode
  largeThreshold: 2000,  // Activate if > 2000 points
  data: points
}]

Disables hover on individual points, renders as batch.

Configuration System#

Option Object Structure#

{
  // Title
  title: {
    text: 'Sales Dashboard',
    subtext: 'Q1 2025',
    left: 'center'
  },

  // Tooltip
  tooltip: {
    trigger: 'axis',  // or 'item', 'none'
    formatter: '{b}: {c}'  // Template or function
  },

  // Legend
  legend: {
    data: ['Sales', 'Profit'],
    bottom: 0
  },

  // Grid (chart area)
  grid: {
    left: '10%',
    right: '10%',
    bottom: '15%',
    containLabel: true
  },

  // Axes
  xAxis: {
    type: 'category',  // or 'value', 'time', 'log'
    data: ['Mon', 'Tue', 'Wed'],
    axisLine: { lineStyle: { color: '#666' } },
    axisTick: { show: false }
  },

  yAxis: {
    type: 'value',
    axisLabel: { formatter: '{value} K' },
    splitLine: { lineStyle: { type: 'dashed' } }
  },

  // Data Zoom (pan/zoom controls)
  dataZoom: [
    { type: 'slider', start: 0, end: 100 },
    { type: 'inside' }  // Mouse wheel zoom
  ],

  // Toolbox (export, zoom, restore)
  toolbox: {
    feature: {
      saveAsImage: {},  // Export as PNG
      dataZoom: {},     // Box zoom
      restore: {},      // Reset
      dataView: {}      // Show data table
    }
  },

  // Series (the actual data)
  series: [{
    name: 'Sales',
    type: 'line',  // or 'bar', 'pie', 'scatter', 'heatmap', etc.
    data: [120, 200, 150, 80, 70, 110],
    smooth: true,  // Bezier curve smoothing
    areaStyle: {},  // Fill area under line
    emphasis: {
      focus: 'series'  // Highlight on hover
    }
  }]
}