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