@ranimontagna/agent-toolkit 0.3.6 → 0.3.7

package/skills/frontend/design/ui-ux-pro-max/data/app-interface.csv

@@ -1,31 +1,33 @@
 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
+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
+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 target size platform runtime arbitration iOS 44pt Android 48dp web 24 CSS px React Native hitSlop,iOS/Android/React Native,Native targets use 44pt on iOS and 48dp on Android; web WCAG 2.2 has a separate 24 by 24 CSS px minimum with exceptions,Select 44pt for iOS and 48dp for Android at runtime; evaluate web targets separately against WCAG 2.5.8 and its exceptions,"Collapse iOS 44pt, Android 48dp, and web 24 CSS px into one cross-platform number","Platform.select({ ios: 44, android: 48 }); // web: evaluate 24 CSS px + WCAG exceptions",<Pressable><Icon size={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
+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
+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
+31,Accessibility,Dragging Alternatives,accessible drag interaction drag single pointer alternative keyboard drag alternative reorder resize move buttons React Native native runtime platform router arbitration iOS Android web,iOS/Android/React Native,React Native drag and reorder operations need a non-drag path selected for the active native runtime,Provide named Move up/down buttons or a position menu beside drag handles; route iOS and Android behavior through the runtime platform adapter,"Make drag, swipe, or a web-only pointer handler the only way to reorder native content","<Button title=""Move up"" onPress={() => moveItem(index, index - 1)} />",<DragHandle /> only,High
+32,Forms,Authentication Reuse,password manager passkey paste redundant entry,iOS/Android/React Native,Authentication and multi-step flows should reuse prior values,Support password managers passkeys paste and prefilled confirmed values,Force users to retype credentials or the same data in one flow,"textContentType=""password"" autoComplete=""current-password""",onPaste disabled,Critical

package/skills/frontend/design/ui-ux-pro-max/data/catalog-summary.json

@@ -0,0 +1,78 @@
+{
+  "schemaVersion": 1,
+  "verifiedAt": "2026-08-26",
+  "counts": {
+    "styles": {
+      "total": 88,
+      "searchable": 79,
+      "active": 50,
+      "supplemental": 29,
+      "deprecated": 9
+    },
+    "products": 192,
+    "palettes": 192,
+    "reasoningProfiles": 192,
+    "fontPairings": 74,
+    "googleFonts": 1934,
+    "curatedIcons": 105,
+    "upstreamPhosphorIcons": 1512,
+    "uxGuidelines": 119,
+    "motionPresets": 17,
+    "chartTypes": 25,
+    "stacks": 22,
+    "stackGuidelines": 1271
+  },
+  "snapshots": {
+    "google-fonts.csv": {
+      "sha256": "1c8c3b2ea1faf6a1012da463756def8b3889db33f2226f0343bb4daa80307d03"
+    },
+    "google-font-licenses.json": {
+      "sha256": "35688523f2955795caa1a47c53b83099e60c1708461476f9cc3a050cf3b0148a"
+    },
+    "icons.csv": {
+      "sha256": "50816c6012030178195a16ee481ebf58b47bd985d70e8ec58886cc83f6eddafc"
+    },
+    "phosphor-icons-upstream.json": {
+      "sha256": "2399325233b277b5c97a80e6a5e8941154f5d057beee4e7613db87c87d700236"
+    }
+  },
+  "promotionPolicy": {
+    "changedFamilySetRequiresExplicitApproval": true,
+    "relevanceGateRequired": true,
+    "unlicensedFamiliesExcluded": true
+  },
+  "pendingCandidates": [
+    {
+      "family": "Edu NSW ACT Cursive",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Edu NSW ACT Hand Pre",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Edu QLD Hand",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Edu SA Hand",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Edu VIC WA NT Hand",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Edu VIC WA NT Hand Pre",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Google Sans",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    },
+    {
+      "family": "Google Sans Flex",
+      "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot"
+    }
+  ]
+}

package/skills/frontend/design/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 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