@oriro/orirocli 0.1.9 → 0.1.11

package/skills/craft/uipm-ui-ux-pro-max/data/app-interface.csv

@@ -1,31 +1,31 @@
-No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
-1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>","<Pressable><XIcon /></Pressable>",Critical
-2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
-3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>","<View onTouchStart={submit}>Submit</View>",High
-4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>","<Text>{status}</Text>",Medium
-5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />","<Icon />",Medium
-6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,Primary touch targets must be at least 44x44pt,Increase hitSlop or padding to meet minimum,Small icons with tiny touch area,"<Pressable hitSlop={10}><Icon /></Pressable>","<Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable>",Critical
-7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,"<View style={{ gap: 8 }}><Button ... /><Button ... /></View>","<View><Button ... /><Button ... /></View>",Medium
-8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,"HorizontalPager inside vertical ScrollView","PanResponder on full screen blocking back",High
-9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},"BackHandler.exitApp() on first press",Critical
-10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,"Home/Explore/Shop/Cart/Profile/Settings/More",Medium
-11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>","<Modal><View>{children}</View></Modal>",High
-12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,"<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>","<Tab.Screen options={{ unmountOnBlur: true }} />",Medium
-13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}", "<Button title=""Save"" onPress={submit} /> // no loading",High
-14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,"showToast('Saved successfully')","// silently update state only",Medium
-15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,"<TextInput ... /><Text style={{color:'red'}}>{error}</Text>","<TextInput style={{borderColor:'red'}} />",High
-16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,"onBlur={() => validateEmail(value)}","onChangeText={v => validateEmail(v)} // every char",Medium
-17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
-18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,"onSubmitEditing={() => nextRef.current?.focus()}","// no onSubmitEditing, manual tap only",Low
-19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,"<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />","<TextInput secureTextEntry /> // no toggle",Medium
-20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
-21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
-22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
-23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
-24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
-25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
-26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
-27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,"<Text allowFontScaling>{label}</Text>","<Text allowFontScaling={false}>{label}</Text>",High
-28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,"<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>","<View style={{ flex: 1 }}><Screen /></View>",High
-29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,"colors.textPrimaryDark = '#F9FAFB'","colors.textPrimaryDark = '#9CA3AF' on '#111827'",High
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>","<Pressable><XIcon /></Pressable>",Critical
+2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
+3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>","<View onTouchStart={submit}>Submit</View>",High
+4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>","<Text>{status}</Text>",Medium
+5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />","<Icon />",Medium
+6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,Primary touch targets must be at least 44x44pt,Increase hitSlop or padding to meet minimum,Small icons with tiny touch area,"<Pressable hitSlop={10}><Icon /></Pressable>","<Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable>",Critical
+7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,"<View style={{ gap: 8 }}><Button ... /><Button ... /></View>","<View><Button ... /><Button ... /></View>",Medium
+8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,"HorizontalPager inside vertical ScrollView","PanResponder on full screen blocking back",High
+9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},"BackHandler.exitApp() on first press",Critical
+10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,"Home/Explore/Shop/Cart/Profile/Settings/More",Medium
+11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>","<Modal><View>{children}</View></Modal>",High
+12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,"<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>","<Tab.Screen options={{ unmountOnBlur: true }} />",Medium
+13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}", "<Button title=""Save"" onPress={submit} /> // no loading",High
+14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,"showToast('Saved successfully')","// silently update state only",Medium
+15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,"<TextInput ... /><Text style={{color:'red'}}>{error}</Text>","<TextInput style={{borderColor:'red'}} />",High
+16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,"onBlur={() => validateEmail(value)}","onChangeText={v => validateEmail(v)} // every char",Medium
+17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
+18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,"onSubmitEditing={() => nextRef.current?.focus()}","// no onSubmitEditing, manual tap only",Low
+19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,"<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />","<TextInput secureTextEntry /> // no toggle",Medium
+20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
+21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
+22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
+23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
+24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
+25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
+26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
+27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,"<Text allowFontScaling>{label}</Text>","<Text allowFontScaling={false}>{label}</Text>",High
+28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,"<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>","<View style={{ flex: 1 }}><Screen /></View>",High
+29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,"colors.textPrimaryDark = '#F9FAFB'","colors.textPrimaryDark = '#9CA3AF' on '#111827'",High
 30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,Don't rely solely on hidden gestures for core actions,Provide visible buttons in addition to gestures,Rely on swipe/shake only with no UI affordance,"Swipe to delete + visible Delete button","Only shake device to undo with no UI",Critical

package/skills/craft/uipm-ui-ux-pro-max/data/charts.csv

@@ -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 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