csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(skills): sync thirdparty skills

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:06 +08:00
parent 5d73964db8
commit 7233646398
68 changed files with 66265 additions and 4343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/thirdparty/ui-ux-pro-max/data/charts.csv
Vendored
+26 -26
View File
@@ -1,26 +1,26 @@
No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level
1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area","Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period","Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists","<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals","Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity",AA,"Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users.","Dashed/dotted lines per series; togglable data table with timestamps and values","Chart.js, Recharts, ApexCharts",Hover + Zoom
2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar","Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15","Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)","<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table","Each bar: distinct color. Grouped: same hue family. Always sort descending by value",AAA,"Value labels on each bar by default. Sort control for user reordering.","Value labels always visible; provide CSV export","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, Waffle Chart","≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values","Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context","Max 6 slices; beyond that switch to stacked bar 100%","5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %",C,"Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts.","Must provide stacked bar alternative + percentage data table as mandatory fallback","Chart.js, Recharts, D3.js",Hover + Drill
4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster",Scatter Plot or Bubble Chart,"Heat Map, Matrix","Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset","Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context","<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first","Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density",B,"Provide data table alternative. Combine color + shape distinction for colorblind users.","Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group","D3.js, Plotly, Recharts",Hover + Brush
5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)","Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback","Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG","Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend",B,"Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks.","Numerical overlay on hover; downloadable grid table with row/column labels","D3.js, Plotly, ApexCharts",Hover + Zoom
6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth",Choropleth Map or Bubble Map,Geographic Heat Map,"Data has a regional/location dimension; spatial distribution is the core insight for the user","Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context","<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering","Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks",B,"Include text labels for major regions. Provide keyboard navigation between regions.","Region text labels; sortable data table by region name and value; keyboard-navigable regions","D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages",Funnel Chart or Sankey,Waterfall (for flows),"Sequential multi-stage process; showing conversion or drop-off rates between defined stages","Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages","3–8 stages optimal; beyond 8 stages group minor steps into 'Other'","Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop",AA,"Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback.","Provide linear list view with stage name + count + drop-off %; keyboard traversal","D3.js, Recharts, Custom SVG",Hover + Drill
8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress",Gauge Chart or Bullet Chart,"Dial, Thermometer","Single KPI measured against a defined target or threshold; dashboard summary context","No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)","Single metric per gauge; for 3+ KPIs use bullet chart grid layout","Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated",AA,"Always show numerical value + % of target as text beside chart. Never rely on color position alone.","Numerical value + % of target shown as visible text; ARIA live region for real-time updates","D3.js, ApexCharts, Custom SVG",Hover
9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate",Line with Confidence Band,Ribbon Chart,"Historical data + model predictions; communicating uncertainty range to non-technical stakeholders","No historical baseline; prediction confidence is too low to be useful; audience is not data-literate","Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range","Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue",AA,"Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed).","Toggle actual/forecast independently; legend labels must include line-style description","Chart.js, ApexCharts, Plotly",Hover + Toggle
10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation",Line Chart with Highlights,Scatter with Alert,"Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data","Anomalies are predefined categories (use bar with highlight); real-time context without a pause control","Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer","Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone",AA,"Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event.","Text alert annotation per anomaly; anomaly summary list panel alongside chart","D3.js, Plotly, ApexCharts",Hover + Alert
11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)","Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely","<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering","Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px",C,"Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas.","Collapsible tree table as primary view; treemap as supplementary visual only","D3.js, Recharts, ApexCharts",Hover + Drilldown
12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer",Sankey Diagram,"Alluvial, Chord Diagram","Showing how quantities flow between nodes; multi-source multi-target distribution","Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context","<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node","Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible",C,"Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile.","Flow table (Source → Target → Value); keyboard-traversable node list with tab stops","D3.js (d3-sankey), Plotly",Hover + Drilldown
13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)","Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total","4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar","Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed",AA,"Color + directional arrow icon per bar (not color alone). Labels on every bar.","Table with running total column; directional arrow icons per row","ApexCharts, Highcharts, Plotly",Hover
14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)","Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts","2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates","Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity",B,"Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading.","Grouped bar chart as mandatory alternative; include raw data table","Chart.js, Recharts, ApexCharts",Hover + Toggle
15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume",Candlestick Chart,"OHLC Bar, Heikin-Ashi","Financial time-series with Open/High/Low/Close data; trading or investment product context only","Non-financial audience; no OHLC data available (use line chart); accessibility-first context","Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once","Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style",B,"Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow).","OHLC data table with sortable columns; numeric summary panel (daily change %)","Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force",Network Graph,"Hierarchical Tree, Adjacency Matrix","Mapping connections between entities; network topology or social graph exploration context","Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context","≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering","Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B",D,"Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative.","Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows","D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups","Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts","Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume","Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336",AA,"Include stats summary table. Annotate outlier count in chart subtitle.","Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation","Plotly, D3.js, Chart.js (plugin)",Hover
18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range",Bullet Chart,"Gauge, Progress Bar","Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large","Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs","Ideal for 3–10 bullet charts in a grid; scales to any count efficiently","Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker",AAA,"All values always visible as text. Color ranges are labeled with text thresholds not color alone.","Numerical values always visible (not hover-only); color ranges labeled with threshold text","D3.js, Plotly, Custom SVG",Hover
19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid",Waffle Chart,"Pictogram, Stacked Bar 100%","Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format","More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space","10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar","3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair",AA,"Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label.","Percentage text always visible; grid cells labeled with aria-label value; provide legend","D3.js, React-Waffle, Custom CSS Grid",Hover
20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)","More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile","<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering","Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors",C,"Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use.","Collapsible indented list with percentages; breadcrumb trail for current drill-down state","D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution",Decomposition Tree,"Decision Tree, Flow Chart","Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios","No clear parent-child causal relationship; audience expects a summary rather than exploration","Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels","Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8",AA,"Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution.","Keyboard expand/collapse tree; screen reader announces node label + value + % impact","Power BI (native), React-Flow, Custom D3.js",Drill + Expand
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud","Scientific/engineering context where Z-axis carries essential info not expressible in 2D","2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards","WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts","Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4",D,"3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI.","Mandatory 2D projection view + data table; do not use as primary chart type in product UI","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring",Streaming Area Chart,"Ticker Tape, Moving Gauge","Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance","Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support","Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll","Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background",B,"Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion.","Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation","Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom
24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart","NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview","Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items","50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile","Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency",C,"Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view.","Sortable list view by frequency with sentiment label column; word cloud as supplementary only","D3-cloud, Highcharts, Nivo",Hover + Filter
25,Process Mining,"process, mining, variants, path, bottleneck, log, event",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net","Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels","No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering","<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering","Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill",B,"Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations.","Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel","React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Risk,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level
1,Trend Over Time,"trend, time-series, line, growth, timeline, progress, accessible chart, keyboard accessible chart",Line Chart,"Area Chart, Smooth Area",Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period,Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists,<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals,Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity,deprecated: use Accessibility Risk,risk:low,"Use solid, dashed, and dotted line styles plus direct series labels; never distinguish series by hue alone.",Visible data table plus concise trend summary. Keyboard: focus reveals hover values; +/- buttons zoom; Reset restores the full range.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
2,Compare Categories,"compare, categories, bar, comparison, ranking, accessible chart, keyboard accessible chart",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15,Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked),<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table,Each bar: distinct color. Grouped: same hue family. Always sort descending by value,deprecated: use Accessibility Risk,risk:low,Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone.,Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction.,"Chart.js, Recharts, D3.js",Hover + Sort
3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share, accessible chart, keyboard accessible chart",Pie Chart or Donut,"Stacked Bar, Waffle Chart",≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values,Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context,Max 6 slices; beyond that switch to stacked bar 100%,5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %,deprecated: use Accessibility Risk,risk:high,"Pie charts do not inherently fail WCAG; unlabeled color-only slices are inaccessible. Use direct labels and patterns, with a non-pie fallback. Do not rely on color alone.",Percentage data table and concise part-to-whole summary; offer a stacked bar view. Keyboard: focus reveals slice values; Enter/Space drills in; Back button returns.,"Chart.js, Recharts, D3.js",Hover + Drill
4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster, accessible chart, keyboard accessible chart",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset,Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context,<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first,Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density,deprecated: use Accessibility Risk,risk:conditional,Combine marker shapes with direct group labels; color may reinforce but must not be the only distinction.,Visible data table plus correlation summary. Keyboard: focus reveals point values; labeled start/end range inputs replace brush dragging.,"D3.js, Plotly, Recharts",Hover + Brush
5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar, accessible chart, keyboard accessible chart",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)",Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback,"Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG",Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend,deprecated: use Accessibility Risk,risk:conditional,Print values or symbols in cells and use texture/labels in addition to the color scale. Do not rely on color alone.,Grid data table plus intensity summary. Keyboard: focus reveals cell values; +/- buttons zoom; Reset restores the grid.,"D3.js, Plotly, ApexCharts",Hover + Zoom
6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth, accessible chart, keyboard accessible chart",Choropleth Map or Bubble Map,Geographic Heat Map,Data has a regional/location dimension; spatial distribution is the core insight for the user,Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context,<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering,Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks,deprecated: use Accessibility Risk,risk:conditional,Label regions directly and pair fills with boundaries or patterns; location meaning cannot depend on color alone.,Sortable region table plus geographic summary. Keyboard: arrow keys or labeled pan buttons move the map; +/- buttons zoom; Enter drills into a focused region; Back returns.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages, accessible chart, keyboard accessible chart",Funnel Chart or Sankey,Waterfall (for flows),Sequential multi-stage process; showing conversion or drop-off rates between defined stages,Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages,3–8 stages optimal; beyond 8 stages group minor steps into 'Other',Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop,deprecated: use Accessibility Risk,risk:conditional,"Keep stage names and values visible and distinguish stages with text and boundaries, not only a gradient. Do not rely on color alone.",Linear stage table/list plus conversion summary. Keyboard: focus reveals stage values; Enter/Space drills in; Back returns.,"D3.js, Recharts, Custom SVG",Hover + Drill
8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress, accessible chart, keyboard accessible chart",Gauge Chart or Bullet Chart,"Dial, Thermometer",Single KPI measured against a defined target or threshold; dashboard summary context,No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid),Single metric per gauge; for 3+ KPIs use bullet chart grid layout,Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated,deprecated: use Accessibility Risk,risk:low,Place the number and target text beside the gauge and label threshold zones; red/yellow/green alone is insufficient.,Visible KPI/target text and a one-row data table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, ApexCharts, Custom SVG",Hover
9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate, accessible chart, keyboard accessible chart",Line with Confidence Band,Ribbon Chart,Historical data + model predictions; communicating uncertainty range to non-technical stakeholders,No historical baseline; prediction confidence is too low to be useful; audience is not data-literate,Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range,Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue,deprecated: use Accessibility Risk,risk:conditional,"Use solid actual and dashed forecast lines, direct labels, and a named confidence range; hue alone is insufficient.",Visible forecast table plus uncertainty summary. Keyboard: focus reveals hover values; buttons toggle actual/forecast; +/- buttons zoom; Reset restores range.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation, accessible chart, keyboard accessible chart",Line Chart with Highlights,Scatter with Alert,Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data,Anomalies are predefined categories (use bar with highlight); real-time context without a pause control,"Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer",Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone,deprecated: use Accessibility Risk,risk:conditional,Mark anomalies with a distinct shape and text annotation as well as color. Do not rely on color alone.,Anomaly event list/table plus narrative alert summary. Keyboard: focus reveals point details; alerts are available in the persistent list without hover.,"D3.js, Plotly, ApexCharts",Hover + Alert
11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill, accessible chart, keyboard accessible chart",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)",Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely,<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering,Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px,deprecated: use Accessibility Risk,risk:high,Label hierarchy nodes and use borders/patterns as well as hue; make the tree table the primary accessible view. Do not rely on color alone.,Collapsible tree table plus hierarchy summary; treemap remains supplementary. Keyboard: focus reveals hover values; Enter/Space drills or expands; Back collapses/returns.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer, accessible chart, keyboard accessible chart",Sankey Diagram,"Alluvial, Chord Diagram",Showing how quantities flow between nodes; multi-source multi-target distribution,Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context,<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node,Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible,deprecated: use Accessibility Risk,risk:conditional,"Label source, target, and value; use line style or node symbols in addition to gradient color. Do not rely on color alone.",Source-to-target flow table plus flow summary. Keyboard: focus reveals hover values; Enter/Space drills into a node; Back returns.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta, accessible chart, keyboard accessible chart",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)",Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total,4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar,Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed,deprecated: use Accessibility Risk,risk:low,"Pair increase/decrease bars with signed values and directional icons, not red/green alone. Do not rely on color alone.",Running-total table plus variance summary. Keyboard: focus reveals the same value as hover.,"ApexCharts, Highcharts, Plotly",Hover
14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison, accessible chart, keyboard accessible chart",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)",Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts,2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates,Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity,deprecated: use Accessibility Risk,risk:conditional,"Use line styles, point shapes, and direct series labels in addition to color. Do not rely on color alone.",Raw data table and grouped-bar alternative plus comparison summary. Keyboard: focus reveals values; buttons toggle series.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume, accessible chart, keyboard accessible chart",Candlestick Chart,"OHLC Bar, Heikin-Ashi",Financial time-series with Open/High/Low/Close data; trading or investment product context only,Non-financial audience; no OHLC data available (use line chart); accessibility-first context,Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once,Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style,deprecated: use Accessibility Risk,risk:conditional,Use filled versus hollow candles and OHLC text values; bullish/bearish meaning cannot depend on color. Do not rely on color alone.,Sortable OHLC table plus daily-change summary. Keyboard: focus reveals candle values; +/- buttons zoom; Reset restores range; live updates do not steal focus.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force, accessible chart, keyboard accessible chart",Network Graph,"Hierarchical Tree, Adjacency Matrix",Mapping connections between entities; network topology or social graph exploration context,Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context,≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering,Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B,deprecated: use Accessibility Risk,risk:high,"Use labeled node types, shapes, and edge styles in addition to color; the adjacency view is the accessible source of truth. Do not rely on color alone.",Adjacency list/table and relationship summary; tree view when applicable. Keyboard: focus reveals node details; Enter drills; Move up/down/left/right buttons replace drag.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot, accessible chart, keyboard accessible chart",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups",Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts,Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume,Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336,deprecated: use Accessibility Risk,risk:low,"Label median, quartiles, whiskers, and outliers directly; do not use color alone for statistical roles.",Statistics table plus distribution summary. Keyboard: focus reveals the same statistics as hover.,"Plotly, D3.js, Chart.js (plugin)",Hover
18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range, accessible chart, keyboard accessible chart",Bullet Chart,"Gauge, Progress Bar",Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large,Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs,Ideal for 3–10 bullet charts in a grid; scales to any count efficiently,Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker,deprecated: use Accessibility Risk,risk:low,Label every qualitative range and target with text; color is supplementary.,Visible KPI/target table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, Plotly, Custom SVG",Hover
19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid, accessible chart, keyboard accessible chart",Waffle Chart,"Pictogram, Stacked Bar 100%",Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format,More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space,10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar,3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair,deprecated: use Accessibility Risk,risk:low,Label each category and percentage and add patterns or symbols; filled-cell color alone is insufficient.,Percentage table/list plus part-to-whole summary. Keyboard: focus reveals each cell value.,"D3.js, React-Waffle, Custom CSS Grid",Hover
20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle, accessible chart, keyboard accessible chart",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)",More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile,<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering,Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors,deprecated: use Accessibility Risk,risk:high,Label hierarchy levels and segments and use boundaries/patterns as well as hue; the indented list is primary. Do not rely on color alone.,Collapsible indented list/table plus hierarchy summary and breadcrumbs. Keyboard: Enter/Space drills or expands; Back button returns; focus reveals hover detail.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution, accessible chart, keyboard accessible chart",Decomposition Tree,"Decision Tree, Flow Chart",Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios,No clear parent-child causal relationship; audience expects a summary rather than exploration,Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels,Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8,deprecated: use Accessibility Risk,risk:low,Name each node and contribution and use shapes/connector styles in addition to color. Do not rely on color alone.,Expandable tree table plus root-cause summary. Keyboard: Enter/Space drills and expands; Back collapses; dedicated expand/collapse buttons expose the same operations.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud, accessible chart, keyboard accessible chart",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud",Scientific/engineering context where Z-axis carries essential info not expressible in 2D,2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards,"WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts",Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4,deprecated: use Accessibility Risk,risk:high,"Use labels, shapes, and depth-independent cues; color and 3D position cannot be the only carriers of meaning.","Mandatory 2D projection, data table, and spatial summary. Keyboard: rotate/pan buttons and +/- zoom controls replace pointer/VR manipulation; Reset returns the camera.","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring, accessible chart, keyboard accessible chart",Streaming Area Chart,"Ticker Tape, Moving Gauge",Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance,Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support,Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll,Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background,deprecated: use Accessibility Risk,risk:conditional,Show the current value and status text and use line styles or markers in addition to color. Do not rely on color alone.,Streaming data table plus current-value/trend summary. Keyboard: Pause/Resume button controls updates; focus reveals values; +/- buttons zoom; Reset restores range.,"Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom
24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis, accessible chart, keyboard accessible chart",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview,Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items,50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile,Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency,deprecated: use Accessibility Risk,risk:high,"Expose every term, count, and sentiment as text; size and color are supplementary only.",Sortable term table/list plus sentiment summary; word cloud is supplementary. Keyboard: focus reveals word details; labeled controls filter with Space/Enter.,"D3-cloud, Highcharts, Nivo",Hover + Filter
25,Process Mining,"process, mining, variants, path, bottleneck, log, event, accessible chart, keyboard accessible chart",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels,No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering,<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering,Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill,deprecated: use Accessibility Risk,risk:conditional,Label nodes and paths and use shapes/line styles in addition to color; bottlenecks require text annotations. Do not rely on color alone.,Path summary table plus bottleneck narrative. Keyboard: Move buttons replace drag; focus reveals node details; Enter activates a node; Back returns.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
1 No Data Type Keywords Best Chart Type Secondary Options When to Use When NOT to Use Data Volume Threshold Color Guidance Accessibility Grade Accessibility Risk Accessibility Notes A11y Fallback Library Recommendation Interactive Level
2 1 Trend Over Time trend, time-series, line, growth, timeline, progress trend, time-series, line, growth, timeline, progress, accessible chart, keyboard accessible chart Line Chart Area Chart, Smooth Area Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists <1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity AA deprecated: use Accessibility Risk risk:low Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users. Use solid, dashed, and dotted line styles plus direct series labels; never distinguish series by hue alone. Dashed/dotted lines per series; togglable data table with timestamps and values Visible data table plus concise trend summary. Keyboard: focus reveals hover values; +/- buttons zoom; Reset restores the full range. Chart.js, Recharts, ApexCharts Hover + Zoom
3 2 Compare Categories compare, categories, bar, comparison, ranking compare, categories, bar, comparison, ranking, accessible chart, keyboard accessible chart Bar Chart (Horizontal or Vertical) Column Chart, Grouped Bar Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15 Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked) <20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table Each bar: distinct color. Grouped: same hue family. Always sort descending by value AAA deprecated: use Accessibility Risk risk:low Value labels on each bar by default. Sort control for user reordering. Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone. Value labels always visible; provide CSV export Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction. Chart.js, Recharts, D3.js Hover + Sort
4 3 Part-to-Whole part-to-whole, pie, donut, percentage, proportion, share part-to-whole, pie, donut, percentage, proportion, share, accessible chart, keyboard accessible chart Pie Chart or Donut Stacked Bar, Waffle Chart ≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context Max 6 slices; beyond that switch to stacked bar 100% 5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with % C deprecated: use Accessibility Risk risk:high Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts. Pie charts do not inherently fail WCAG; unlabeled color-only slices are inaccessible. Use direct labels and patterns, with a non-pie fallback. Do not rely on color alone. Must provide stacked bar alternative + percentage data table as mandatory fallback Percentage data table and concise part-to-whole summary; offer a stacked bar view. Keyboard: focus reveals slice values; Enter/Space drills in; Back button returns. Chart.js, Recharts, D3.js Hover + Drill
5 4 Correlation / Distribution correlation, distribution, scatter, relationship, pattern, cluster correlation, distribution, scatter, relationship, pattern, cluster, accessible chart, keyboard accessible chart Scatter Plot or Bubble Chart Heat Map, Matrix Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context <500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density B deprecated: use Accessibility Risk risk:conditional Provide data table alternative. Combine color + shape distinction for colorblind users. Combine marker shapes with direct group labels; color may reinforce but must not be the only distinction. Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group Visible data table plus correlation summary. Keyboard: focus reveals point values; labeled start/end range inputs replace brush dragging. D3.js, Plotly, Recharts Hover + Brush
6 5 Heatmap / Intensity heatmap, heat-map, intensity, density, matrix, calendar heatmap, heat-map, intensity, density, matrix, calendar, accessible chart, keyboard accessible chart Heat Map or Choropleth Grid Heat Map, Bubble Heat Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day) Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend B deprecated: use Accessibility Risk risk:conditional Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks. Print values or symbols in cells and use texture/labels in addition to the color scale. Do not rely on color alone. Numerical overlay on hover; downloadable grid table with row/column labels Grid data table plus intensity summary. Keyboard: focus reveals cell values; +/- buttons zoom; Reset restores the grid. D3.js, Plotly, ApexCharts Hover + Zoom
7 6 Geographic Data geographic, map, location, region, geo, spatial, choropleth geographic, map, location, region, geo, spatial, choropleth, accessible chart, keyboard accessible chart Choropleth Map or Bubble Map Geographic Heat Map Data has a regional/location dimension; spatial distribution is the core insight for the user Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context <1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks B deprecated: use Accessibility Risk risk:conditional Include text labels for major regions. Provide keyboard navigation between regions. Label regions directly and pair fills with boundaries or patterns; location meaning cannot depend on color alone. Region text labels; sortable data table by region name and value; keyboard-navigable regions Sortable region table plus geographic summary. Keyboard: arrow keys or labeled pan buttons move the map; +/- buttons zoom; Enter drills into a focused region; Back returns. D3.js, Mapbox, Leaflet Pan + Zoom + Drill
8 7 Funnel / Flow funnel, flow, conversion, drop-off, pipeline, stages funnel, flow, conversion, drop-off, pipeline, stages, accessible chart, keyboard accessible chart Funnel Chart or Sankey Waterfall (for flows) Sequential multi-stage process; showing conversion or drop-off rates between defined stages Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages 3–8 stages optimal; beyond 8 stages group minor steps into 'Other' Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop AA deprecated: use Accessibility Risk risk:conditional Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback. Keep stage names and values visible and distinguish stages with text and boundaries, not only a gradient. Do not rely on color alone. Provide linear list view with stage name + count + drop-off %; keyboard traversal Linear stage table/list plus conversion summary. Keyboard: focus reveals stage values; Enter/Space drills in; Back returns. D3.js, Recharts, Custom SVG Hover + Drill
9 8 Performance vs Target performance, target, kpi, gauge, goal, threshold, progress performance, target, kpi, gauge, goal, threshold, progress, accessible chart, keyboard accessible chart Gauge Chart or Bullet Chart Dial, Thermometer Single KPI measured against a defined target or threshold; dashboard summary context No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid) Single metric per gauge; for 3+ KPIs use bullet chart grid layout Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated AA deprecated: use Accessibility Risk risk:low Always show numerical value + % of target as text beside chart. Never rely on color position alone. Place the number and target text beside the gauge and label threshold zones; red/yellow/green alone is insufficient. Numerical value + % of target shown as visible text; ARIA live region for real-time updates Visible KPI/target text and a one-row data table plus status summary. Keyboard: focus reveals the same detail as hover. D3.js, ApexCharts, Custom SVG Hover
10 9 Time-Series Forecast forecast, prediction, confidence, band, projection, estimate forecast, prediction, confidence, band, projection, estimate, accessible chart, keyboard accessible chart Line with Confidence Band Ribbon Chart Historical data + model predictions; communicating uncertainty range to non-technical stakeholders No historical baseline; prediction confidence is too low to be useful; audience is not data-literate Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue AA deprecated: use Accessibility Risk risk:conditional Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed). Use solid actual and dashed forecast lines, direct labels, and a named confidence range; hue alone is insufficient. Toggle actual/forecast independently; legend labels must include line-style description Visible forecast table plus uncertainty summary. Keyboard: focus reveals hover values; buttons toggle actual/forecast; +/- buttons zoom; Reset restores range. Chart.js, ApexCharts, Plotly Hover + Toggle
11 10 Anomaly Detection anomaly, outlier, spike, alert, detection, monitoring, deviation anomaly, outlier, spike, alert, detection, monitoring, deviation, accessible chart, keyboard accessible chart Line Chart with Highlights Scatter with Alert Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data Anomalies are predefined categories (use bar with highlight); real-time context without a pause control Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone AA deprecated: use Accessibility Risk risk:conditional Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event. Mark anomalies with a distinct shape and text annotation as well as color. Do not rely on color alone. Text alert annotation per anomaly; anomaly summary list panel alongside chart Anomaly event list/table plus narrative alert summary. Keyboard: focus reveals point details; alerts are available in the persistent list without hover. D3.js, Plotly, ApexCharts Hover + Alert
12 11 Hierarchical / Nested Data hierarchy, nested, treemap, parent, children, breakdown, drill hierarchy, nested, treemap, parent, children, breakdown, drill, accessible chart, keyboard accessible chart Treemap Sunburst, Nested Donut, Icicle Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown) Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely <200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px C deprecated: use Accessibility Risk risk:high Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas. Label hierarchy nodes and use borders/patterns as well as hue; make the tree table the primary accessible view. Do not rely on color alone. Collapsible tree table as primary view; treemap as supplementary visual only Collapsible tree table plus hierarchy summary; treemap remains supplementary. Keyboard: focus reveals hover values; Enter/Space drills or expands; Back collapses/returns. D3.js, Recharts, ApexCharts Hover + Drilldown
13 12 Flow / Process Data flow, process, sankey, distribution, source, target, transfer flow, process, sankey, distribution, source, target, transfer, accessible chart, keyboard accessible chart Sankey Diagram Alluvial, Chord Diagram Showing how quantities flow between nodes; multi-source multi-target distribution Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context <50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible C deprecated: use Accessibility Risk risk:conditional Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile. Label source, target, and value; use line style or node symbols in addition to gradient color. Do not rely on color alone. Flow table (Source → Target → Value); keyboard-traversable node list with tab stops Source-to-target flow table plus flow summary. Keyboard: focus reveals hover values; Enter/Space drills into a node; Back returns. D3.js (d3-sankey), Plotly Hover + Drilldown
14 13 Cumulative Changes waterfall, cumulative, variance, incremental, bridge, delta waterfall, cumulative, variance, incremental, bridge, delta, accessible chart, keyboard accessible chart Waterfall Chart Stacked Bar, Cascade Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance) Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total 4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed AA deprecated: use Accessibility Risk risk:low Color + directional arrow icon per bar (not color alone). Labels on every bar. Pair increase/decrease bars with signed values and directional icons, not red/green alone. Do not rely on color alone. Table with running total column; directional arrow icons per row Running-total table plus variance summary. Keyboard: focus reveals the same value as hover. ApexCharts, Highcharts, Plotly Hover
15 14 Multi-Variable Comparison radar, spider, multi-variable, attributes, dimensions, comparison radar, spider, multi-variable, attributes, dimensions, comparison, accessible chart, keyboard accessible chart Radar / Spider Chart Parallel Coordinates, Grouped Bar Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison) Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts 2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity B deprecated: use Accessibility Risk risk:conditional Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading. Use line styles, point shapes, and direct series labels in addition to color. Do not rely on color alone. Grouped bar chart as mandatory alternative; include raw data table Raw data table and grouped-bar alternative plus comparison summary. Keyboard: focus reveals values; buttons toggle series. Chart.js, Recharts, ApexCharts Hover + Toggle
16 15 Stock / Trading OHLC stock, trading, ohlc, candlestick, finance, price, volume stock, trading, ohlc, candlestick, finance, price, volume, accessible chart, keyboard accessible chart Candlestick Chart OHLC Bar, Heikin-Ashi Financial time-series with Open/High/Low/Close data; trading or investment product context only Non-financial audience; no OHLC data available (use line chart); accessibility-first context Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style B deprecated: use Accessibility Risk risk:conditional Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow). Use filled versus hollow candles and OHLC text values; bullish/bearish meaning cannot depend on color. Do not rely on color alone. OHLC data table with sortable columns; numeric summary panel (daily change %) Sortable OHLC table plus daily-change summary. Keyboard: focus reveals candle values; +/- buttons zoom; Reset restores range; live updates do not steal focus. Lightweight Charts (TradingView), ApexCharts Real-time + Hover + Zoom
17 16 Relationship / Connection Data network, graph, nodes, edges, connections, relationships, force network, graph, nodes, edges, connections, relationships, force, accessible chart, keyboard accessible chart Network Graph Hierarchical Tree, Adjacency Matrix Mapping connections between entities; network topology or social graph exploration context Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context ≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B D deprecated: use Accessibility Risk risk:high Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative. Use labeled node types, shapes, and edge styles in addition to color; the adjacency view is the accessible source of truth. Do not rely on color alone. Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows Adjacency list/table and relationship summary; tree view when applicable. Keyboard: focus reveals node details; Enter drills; Move up/down/left/right buttons replace drag. D3.js (d3-force), Vis.js, Cytoscape.js Drilldown + Hover + Drag
18 17 Distribution / Statistical distribution, statistical, spread, median, outlier, quartile, boxplot distribution, statistical, spread, median, outlier, quartile, boxplot, accessible chart, keyboard accessible chart Box Plot Violin Plot, Beeswarm Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336 AA deprecated: use Accessibility Risk risk:low Include stats summary table. Annotate outlier count in chart subtitle. Label median, quartiles, whiskers, and outliers directly; do not use color alone for statistical roles. Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation Statistics table plus distribution summary. Keyboard: focus reveals the same statistics as hover. Plotly, D3.js, Chart.js (plugin) Hover
19 18 Performance vs Target (Compact) bullet, compact, kpi, dashboard, target, benchmark, range bullet, compact, kpi, dashboard, target, benchmark, range, accessible chart, keyboard accessible chart Bullet Chart Gauge, Progress Bar Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs Ideal for 3–10 bullet charts in a grid; scales to any count efficiently Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker AAA deprecated: use Accessibility Risk risk:low All values always visible as text. Color ranges are labeled with text thresholds not color alone. Label every qualitative range and target with text; color is supplementary. Numerical values always visible (not hover-only); color ranges labeled with threshold text Visible KPI/target table plus status summary. Keyboard: focus reveals the same detail as hover. D3.js, Plotly, Custom SVG Hover
20 19 Proportional / Percentage waffle, percentage, proportion, progress, filled, grid waffle, percentage, proportion, progress, filled, grid, accessible chart, keyboard accessible chart Waffle Chart Pictogram, Stacked Bar 100% Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space 10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar 3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair AA deprecated: use Accessibility Risk risk:low Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label. Label each category and percentage and add patterns or symbols; filled-cell color alone is insufficient. Percentage text always visible; grid cells labeled with aria-label value; provide legend Percentage table/list plus part-to-whole summary. Keyboard: focus reveals each cell value. D3.js, React-Waffle, Custom CSS Grid Hover
21 20 Hierarchical Proportional sunburst, hierarchy, nested, proportion, radial, circle sunburst, hierarchy, nested, proportion, radial, circle, accessible chart, keyboard accessible chart Sunburst Chart Treemap, Icicle, Circle Packing Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown) More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile <100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors C deprecated: use Accessibility Risk risk:high Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use. Label hierarchy levels and segments and use boundaries/patterns as well as hue; the indented list is primary. Do not rely on color alone. Collapsible indented list with percentages; breadcrumb trail for current drill-down state Collapsible indented list/table plus hierarchy summary and breadcrumbs. Keyboard: Enter/Space drills or expands; Back button returns; focus reveals hover detail. D3.js (d3-hierarchy), Recharts, ApexCharts Drilldown + Hover
22 21 Root Cause Analysis root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution, accessible chart, keyboard accessible chart Decomposition Tree Decision Tree, Flow Chart Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios No clear parent-child causal relationship; audience expects a summary rather than exploration Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8 AA deprecated: use Accessibility Risk risk:low Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution. Name each node and contribution and use shapes/connector styles in addition to color. Do not rely on color alone. Keyboard expand/collapse tree; screen reader announces node label + value + % impact Expandable tree table plus root-cause summary. Keyboard: Enter/Space drills and expands; Back collapses; dedicated expand/collapse buttons expose the same operations. Power BI (native), React-Flow, Custom D3.js Drill + Expand
23 22 3D Spatial Data 3d, spatial, immersive, terrain, molecular, volumetric, point-cloud 3d, spatial, immersive, terrain, molecular, volumetric, point-cloud, accessible chart, keyboard accessible chart 3D Scatter / Surface Plot Volumetric Rendering, Point Cloud Scientific/engineering context where Z-axis carries essential info not expressible in 2D 2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4 D deprecated: use Accessibility Risk risk:high 3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI. Use labels, shapes, and depth-independent cues; color and 3D position cannot be the only carriers of meaning. Mandatory 2D projection view + data table; do not use as primary chart type in product UI Mandatory 2D projection, data table, and spatial summary. Keyboard: rotate/pan buttons and +/- zoom controls replace pointer/VR manipulation; Reset returns the camera. Three.js, Deck.gl, Plotly 3D Rotate + Zoom + VR
24 23 Real-Time Streaming streaming, real-time, ticker, live, velocity, pulse, monitoring streaming, real-time, ticker, live, velocity, pulse, monitoring, accessible chart, keyboard accessible chart Streaming Area Chart Ticker Tape, Moving Gauge Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background B deprecated: use Accessibility Risk risk:conditional Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion. Show the current value and status text and use line styles or markers in addition to color. Do not rely on color alone. Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation Streaming data table plus current-value/trend summary. Keyboard: Pause/Resume button controls updates; focus reveals values; +/- buttons zoom; Reset restores range. Smoothed D3.js, CanvasJS Real-time + Pause + Zoom
25 24 Sentiment / Emotion sentiment, emotion, nlp, opinion, feeling, text-analysis sentiment, emotion, nlp, opinion, feeling, text-analysis, accessible chart, keyboard accessible chart Word Cloud with Sentiment Sentiment Arc, Radar Chart NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items 50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency C deprecated: use Accessibility Risk risk:high Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view. Expose every term, count, and sentiment as text; size and color are supplementary only. Sortable list view by frequency with sentiment label column; word cloud as supplementary only Sortable term table/list plus sentiment summary; word cloud is supplementary. Keyboard: focus reveals word details; labeled controls filter with Space/Enter. D3-cloud, Highcharts, Nivo Hover + Filter
26 25 Process Mining process, mining, variants, path, bottleneck, log, event process, mining, variants, path, bottleneck, log, event, accessible chart, keyboard accessible chart Process Map / Graph Directed Acyclic Graph (DAG), Petri Net Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering <30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill B deprecated: use Accessibility Risk risk:conditional Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations. Label nodes and paths and use shapes/line styles in addition to color; bottlenecks require text annotations. Do not rely on color alone. Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel Path summary table plus bottleneck narrative. Keyboard: Move buttons replace drag; focus reveals node details; Enter activates a node; Back returns. React-Flow, Cytoscape.js, Recharts Drag + Node-Click