D3.js v7 SVG · Flexible · Pixel-perfect

D3.js — 54 Cards
~45 SVG renders

D3 gives total control over every SVG pixel. Charts are rendered directly to inline SVG elements. Complex 3D and geo charts show N/A overlays. All renders use the same CHART_DATA and respond to the theme system via CSS custom properties.

54 Cards ~17 Renders 12 Themes SVG API
Basic Charts
Line
Monthly Revenue Trends

12-month multi-series line chart

Multi-Line
Tech Stock Prices

3-year daily close prices for 4 tech stocks

Horizontal Bar
Sales by Region

Ranked horizontal bars by regional revenue

Grouped Bar
Top Product Rankings

Side-by-side quarterly bars per product

Stacked Bar (h)
Quarterly Performance

Stacked horizontal performance by division

Stacked Bar
Revenue by Channel

4-channel stacked revenue over 8 quarters

Pie
Market Share 2025

Industry-wide competitive market share breakdown

Doughnut
Budget Allocation

Annual operating budget distribution by function

Bar
Sales Drilldown by Region

Click to drill into city-level breakdown

Gantt
Project Roadmap

Q1–Q2 2025 product roadmap task bars

Lollipop
Sales vs Target

Monthly actual sales dots and dashed target line

Statistical Charts
Scatter
Marketing Spend vs Revenue

Correlation analysis with size = deal count

Histogram
Transaction Distribution

Frequency distribution of transaction amounts

Box Plot
Scores by Department

Distribution, quartiles and outliers

Violin
Age Distribution by Group

KDE-smoothed distribution

Area
Website Traffic Trends

Monthly visitor volume with YoY overlay

Stacked Area
User Acquisition Channels

Channel-level contribution to total user growth

Dual Axis
Revenue vs Profit Margin

Combined bar + line with independent Y-axes

Error Bars
Forecast Confidence Range

Quarterly revenue with uncertainty bands

Histogram 2D
Spend vs Revenue Density

Bivariate density histogram

Density Contour
Spend vs Revenue Contour

Smooth iso-density curves

SPLOM
Business Metrics Scatter Matrix

Pairwise scatter matrix

N/A – D3.js Complex implementation required
ScatterGL
Large Dataset 2,000 Points

High-volume scatter plot

Bump
Product Rank Journey

Weekly ranking changes across 5 products

Slope
Q1 vs Q4 Revenue

Regional revenue change between Q1 and Q4

Streamgraph
User Acquisition Mix

24-month stacked stream of acquisition channel share

Dumbbell
Salary Range by Dept

P25–P75 salary spread per department

Financial Charts
OHLC
AAPL 30-Day OHLC

30-day open/high/low/close chart

Waterfall
P&L Bridge Analysis

Incremental contribution waterfall

Funnel
Sales Pipeline Stages

Sales stages funnel chart

Candlestick
MSFT Open-High-Low-Close

Candlestick with volume overlay

Funnel Area
Marketing Conversion Funnel

Funnel area chart

Hierarchical Charts
Treemap
Product Revenue Hierarchy

Nested area-proportional hierarchy

Sunburst
Org Budget Hierarchy

Multi-level radial hierarchy

Sankey
Revenue Flow Diagram

Flow diagram showing revenue paths

N/A – D3.js Complex implementation required
Bubble
GDP vs Life Expectancy

Sized scatter by population

Icicle
Icicle Product Hierarchy

Top-down drilldown icicle

Advanced Charts
Heatmap
Weekly Activity Grid

Weekday × hour activity matrix

Radar
Team Skills Assessment

Hexagonal radar skill comparison

Gauge
KPI Performance Meter

Speedometer-style KPI gauge

Indicator
KPI Dashboard Cards

Multi-KPI card display

Heatmap Grid
Performance Score Grid

Grid heatmap of scores

Chord
Deal Flow Path Analysis

Flow chord diagram

N/A – D3.js Complex implementation required
Parallel Coords
Sales Rep Performance

Multi-axis parallel coordinates

Wind Rose
Wind Speed & Direction

Stacked polar-bar chart

Bullet
Division Performance

Actual vs target on band ranges

Calendar Heatmap
Daily Website Activity

Full-year 2024 daily visit heatmap

Marimekko
Revenue by Region & Product

Variable-width stacked bars

3D & Geo Charts
3D Scatter
Customer Segment Clusters

3D scatter; requires WebGL

N/A – D3.js Complex implementation required
Choropleth
US Revenue by State

US filled map; requires TopoJSON

N/A – D3.js Complex implementation required
3D Surface
Revenue Landscape

3D surface; N/A in D3 basic

N/A – D3.js Complex implementation required
3D Surface
sinc(r) Wave Surface

Mathematical surface

N/A – D3.js Complex implementation required
3D Quiver
Wind Vector Field

3D vector field

N/A – D3.js Complex implementation required
Geo Scatter
Global Office Locations

Geographic scatter with projection

N/A – D3.js Complex implementation required