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