25 data shapes → chart picks: each card is one programmatic SVG illustration + selection guidance (best / secondary / colors / a11y / perf / library). “copy pick” takes the conclusion with you.
Trend Over Time
trend time-series line growth timeline progress
Best: Line Chart · Secondary: Area Chart, Smooth Area
Details
Colors Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity
A11y ✓ Clear line patterns for colorblind users. Add pattern overlays.
Perf ⚡ Excellent (optimized)
Library Chart.js, Recharts, ApexCharts
Interactive Hover + Zoom
Compare Categories
compare categories bar comparison ranking
Best: Bar Chart (Horizontal or Vertical) · Secondary: Column Chart, Grouped Bar
Details
Colors Each bar: distinct color. Category: grouped same color. Sorted: descending order
A11y ✓ Easy to compare. Add value labels on bars for clarity.
Perf ⚡ Excellent
Library Chart.js, Recharts, D3.js
Interactive Hover + Sort
Part-to-Whole
part-to-whole pie donut percentage proportion share
Best: Pie Chart or Donut · Secondary: Stacked Bar, Treemap
Details
Colors Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.
A11y ⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.
Perf ⚡ Good (limit 6 slices)
Library Chart.js, Recharts, D3.js
Interactive Hover + Drill
Correlation/Distribution
correlation distribution scatter relationship pattern
Best: Scatter Plot or Bubble Chart · Secondary: Heat Map, Matrix
Details
Colors Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density
A11y ⚠ Provide data table alternative. Use pattern + color distinction.
Perf ⚠ Moderate (many points)
Library D3.js, Plotly, Recharts
Interactive Hover + Brush
Heatmap/Intensity
heatmap heat-map intensity density matrix
Best: Heat Map or Choropleth · Secondary: Grid Heat Map, Bubble Heat
Details
Colors Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data
A11y ⚠ Colorblind: Use pattern overlay. Provide numerical legend.
Perf ⚡ Excellent (color CSS)
Library D3.js, Plotly, ApexCharts
Interactive Hover + Zoom
Geographic Data
geographic map location region geo spatial
Best: Choropleth Map, Bubble Map · Secondary: Geographic Heat Map
Details
Colors Regional: single color gradient or categorized colors. Legend: clear scale
A11y ⚠ Include text labels for regions. Provide data table alternative.
Perf ⚠ Moderate (rendering)
Library D3.js, Mapbox, Leaflet
Interactive Pan + Zoom + Drill
Funnel/Flow
funnel/flow
Best: Funnel Chart, Sankey · Secondary: Waterfall (for flows)
Details
Colors Stages: gradient (starting color → ending color). Show conversion %
A11y ✓ Clear stage labels + percentages. Good for accessibility if labeled.
Perf ⚡ Good
Library D3.js, Recharts, Custom SVG
Interactive Hover + Drill
Performance vs Target
performance-vs-target
Best: Gauge Chart or Bullet Chart · Secondary: Dial, Thermometer
Details
Colors Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors
A11y ✓ Add numerical value + percentage label beside gauge.
Perf ⚡ Good
Library D3.js, ApexCharts, Custom SVG
Interactive Hover
Time-Series Forecast
time-series-forecast
Best: Line with Confidence Band · Secondary: Ribbon Chart
Details
Colors Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading
A11y ✓ Clearly distinguish actual vs forecast. Add legend.
Perf ⚡ Good
Library Chart.js, ApexCharts, Plotly
Interactive Hover + Toggle
Anomaly Detection
anomaly-detection
Best: Line Chart with Highlights · Secondary: Scatter with Alert
Details
Colors Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert
A11y ✓ Circle/marker for anomalies. Add text alert annotation.
Perf ⚡ Good
Library D3.js, Plotly, ApexCharts
Interactive Hover + Alert
Hierarchical/Nested Data
hierarchical/nested-data
Best: Treemap · Secondary: Sunburst, Nested Donut, Icicle
Details
Colors Parent: distinct hues. Children: lighter shades. White borders 2-3px.
A11y ⚠ Poor - provide table alternative. Label large areas.
Perf ⚠ Moderate
Library D3.js, Recharts, ApexCharts
Interactive Hover + Drilldown
Flow/Process Data
flow/process-data
Best: Sankey Diagram · Secondary: Alluvial, Chord Diagram
Details
Colors Gradient from source to target. Opacity 0.4-0.6 for flows.
A11y ⚠ Poor - provide flow table alternative.
Perf ⚠ Moderate
Library D3.js (d3-sankey), Plotly
Interactive Hover + Drilldown
Cumulative Changes
cumulative-changes
Best: Waterfall Chart · Secondary: Stacked Bar, Cascade
Details
Colors Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.
A11y ✓ Good - clear directional colors with labels.
Perf ⚡ Good
Library ApexCharts, Highcharts, Plotly
Interactive Hover
Multi-Variable Comparison
multi-variable-comparison
Best: Radar/Spider Chart · Secondary: Parallel Coordinates, Grouped Bar
Details
Colors Single: #0080FF 20% fill. Multiple: distinct colors per dataset.
A11y ⚠ Moderate - limit 5-8 axes. Add data table.
Perf ⚡ Good
Library Chart.js, Recharts, ApexCharts
Interactive Hover + Toggle
Stock/Trading OHLC
stock/trading-ohlc
Best: Candlestick Chart · Secondary: OHLC Bar, Heikin-Ashi
Details
Colors Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.
A11y ⚠ Moderate - provide OHLC data table.
Perf ⚡ Good
Library Lightweight Charts (TradingView), ApexCharts
Interactive Real-time + Hover + Zoom
Relationship/Connection Data
relationship/connection-data
Best: Network Graph · Secondary: Hierarchical Tree, Adjacency Matrix
Details
Colors Node types: categorical colors. Edges: #90A4AE 60% opacity.
A11y ❌ Very Poor - provide adjacency list alternative.
Perf ❌ Poor (500+ nodes struggles)
Library D3.js (d3-force), Vis.js, Cytoscape.js
Interactive Drilldown + Hover + Drag
Distribution/Statistical
distribution/statistical
Best: Box Plot · Secondary: Violin Plot, Beeswarm
Details
Colors Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.
A11y ✓ Good - include stats table (min, Q1, median, Q3, max).
Perf ⚡ Excellent
Library Plotly, D3.js, Chart.js (plugin)
Interactive Hover
Performance vs Target (Compact)
performance-vs-target-(compact)
Best: Bullet Chart · Secondary: Gauge, Progress Bar
Details
Colors Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.
A11y ✓ Excellent - compact with clear values.
Perf ⚡ Excellent
Library D3.js, Plotly, Custom SVG
Interactive Hover
Proportional/Percentage
proportional/percentage
Best: Waffle Chart · Secondary: Pictogram, Stacked Bar 100%
Details
Colors 10x10 grid. 3-5 categories max. 2-3px spacing between squares.
A11y ✓ Good - better than pie for accessibility.
Perf ⚡ Good
Library D3.js, React-Waffle, Custom CSS Grid
Interactive Hover
Hierarchical Proportional
hierarchical-proportional
Best: Sunburst Chart · Secondary: Treemap, Icicle, Circle Packing
Details
Colors Center to outer: darker to lighter. 15-20% lighter per level.
A11y ⚠ Poor - provide hierarchy table alternative.
Perf ⚠ Moderate
Library D3.js (d3-hierarchy), Recharts, ApexCharts
Interactive Drilldown + Hover
Root Cause Analysis
root cause decomposition tree hierarchy drill-down ai-split
Best: Decomposition Tree · Secondary: Decision Tree, Flow Chart
Details
Colors Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.
A11y ✓ clear hierarchy. Allow keyboard navigation for nodes.
Perf ⚠ Moderate (calculation heavy)
Library Power BI (native), React-Flow, Custom D3.js
Interactive Drill + Expand
3D Spatial Data
3d spatial immersive terrain molecular volumetric
Best: 3D Scatter/Surface Plot · Secondary: Volumetric Rendering, Point Cloud
Details
Colors Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).
A11y ❌ Poor - requires alternative 2D view or data table.
Perf ❌ Heavy (WebGL required)
Library Three.js, Deck.gl, Plotly 3D
Interactive Rotate + Zoom + VR
Real-Time Streaming
streaming real-time ticker live velocity pulse
Best: Streaming Area Chart · Secondary: Ticker Tape, Moving Gauge
Details
Colors Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.
A11y ⚠ Flashing elements - provide pause button. High contrast.
Perf ⚡ Optimized (canvas/webgl)
Library Smoothed D3.js
Interactive CanvasJS
love fast great smooth slow bug okay
Sentiment/Emotion
sentiment emotion nlp opinion feeling
Best: Word Cloud with Sentiment · Secondary: Sentiment Arc, Radar Chart
Details
Colors Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.
A11y ⚠ Word clouds poor for screen readers. Use list view.
Perf ⚡ Good
Library D3-cloud, Highcharts, Nivo
Interactive Hover + Filter
Process Mining
process mining variants path bottleneck log
Best: Process Map / Graph · Secondary: Directed Acyclic Graph (DAG), Petri Net
Details
Colors Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.
A11y ⚠ Complex graphs hard to navigate. Provide path summary.
Perf ⚠ Moderate to Heavy
Library React-Flow, Cytoscape.js, Recharts
Interactive Drag + Node-Click