@su-record/vibe 2.9.21 → 2.9.23

package/vibe/templates/spec-template.md

@@ -1,221 +1,221 @@
-# SPEC: {Feature Name}
-
-## Metadata
-
-- **Created**: {YYYY-MM-DD}
-- **Author**: {Name}
-- **Status**: DRAFT
-- **Priority**: {HIGH | MEDIUM | LOW}
-- **Language**: {en | ko}
-- **Assigned Agent**: {Agent Name}
-- **Tech Stack**: {Project Tech Stack Summary}
-
----
-
-## 1. Feature Overview
-
-{1-2 sentence summary}
-
-### Background
-
-{Why is this feature needed}
-
-### Goals
-
-- Goal 1
-- Goal 2
-
-### Non-Goals
-
-- What we won't do this time 1
-- What we won't do this time 2
-
-### Tech Stack Context
-
-**Existing Technology:**
-
-- Backend: {FastAPI, Django, Express, etc.}
-- Frontend: {React, Flutter, Vue, etc.}
-- Database: {PostgreSQL, MySQL, MongoDB, etc.}
-- Infrastructure: {GCP, AWS, Azure, etc.}
-
-**New Technology Required for This Feature:**
-
-- {New library/service 1} - {Reason}
-- {New library/service 2} - {Reason}
-
-**External API/Service Integration:**
-
-- {Service name} - {Purpose}
-
-**Constraints:**
-
-- Cost limit: {Amount}
-- Performance requirements: {Target response time, throughput, etc.}
-
----
-
-## 2. User Stories
-
-### Story 1: {Story Title}
-
-**As a** {User role}
-**I want** {Desired functionality}
-**So that** {Reason/Value}
-
-#### Acceptance Criteria
-
-- [ ] {Verifiable condition 1}
-- [ ] {Verifiable condition 2}
-
----
-
-## 3. Requirements (EARS Format)
-
-### REQ-001: {Requirement Title}
-
-**WHEN** {Specific condition}
-**THEN** {System behavior} (SHALL | SHOULD | MAY)
-
-#### Acceptance Criteria
-
-- [ ] {Testable criterion 1}
-- [ ] {Testable criterion 2}
-
-#### Example
-
-```text
-Input: {...}
-Output: {...}
-```
-
----
-
-## 4. Non-Functional Requirements
-
-### Performance
-
-- Response time: {Target}
-- Throughput: {Target}
-
-### Security
-
-- Authentication: {Method}
-- Authorization: {Rules}
-
-### Scalability
-
-- Expected growth rate: {Value}
-
----
-
-## 5. Data Model (Draft)
-
-### Entity: {Name}
-
-```json
-{
-  "field1": "type",
-  "field2": "type"
-}
-```
-
----
-
-## 6. API Contract (Draft)
-
-### Endpoint: {Name}
-
-```text
-POST /api/v1/resource
-Request: {...}
-Response: {...}
-```
-
----
-
-## 7. Test Strategy
-
-### BDD Scenarios (Gherkin)
-
-**Generate Command**: `vibe feature "{feature name}"`
-
-```gherkin
-Scenario: {Scenario title}
-  Given {Precondition}
-  When {User action}
-  Then {Expected result}
-```
-
-**Mapping**:
-
-- REQ-001 → Scenario 1, 2
-- REQ-002 → Scenario 3
-
-### Contract Tests (API Schema)
-
-**Generate Command**: `vibe contract "{feature name}"`
-
-**Backend Contract**:
-
-```json
-{
-  "request": {
-    "method": "POST",
-    "path": "/api/v1/{resource}",
-    "schema": {JSON Schema}
-  },
-  "response": {
-    "status": 201,
-    "schema": {JSON Schema}
-  }
-}
-```
-
-**Frontend Contract**:
-
-- Independent testing with mock server
-- Response schema validation (Zod, JSON Schema)
-
-### Test Coverage Goals
-
-- [ ] BDD: Cover all Acceptance Criteria
-- [ ] Contract: Cover all API endpoints
-- [ ] Unit: 70%+ coverage
-- [ ] Integration: Cover critical paths
-
----
-
-## 8. Out of Scope
-
-- ❌ {Excluded item 1}
-- ❌ {Excluded item 2}
-
----
-
-## 9. Verification Checklist
-
-### Requirements
-
-- [ ] Are all requirements testable?
-- [ ] Is SHALL/SHOULD/MAY clear?
-- [ ] Are Acceptance Criteria specific?
-- [ ] Are performance goals measurable?
-
-### Testing
-
-- [ ] BDD Feature file generation complete?
-- [ ] Contract tests defined?
-- [ ] Step Definitions written?
-- [ ] Test coverage goal achieved?
-
----
-
-## 10. Approval
-
-- [ ] User approval
-- [ ] Technical review complete
-- [ ] Test plan approved
-
-Approval Date: ____________
-Approver: ____________
+# SPEC: {Feature Name}
+
+## Metadata
+
+- **Created**: {YYYY-MM-DD}
+- **Author**: {Name}
+- **Status**: DRAFT
+- **Priority**: {HIGH | MEDIUM | LOW}
+- **Language**: {en | ko}
+- **Assigned Agent**: {Agent Name}
+- **Tech Stack**: {Project Tech Stack Summary}
+
+---
+
+## 1. Feature Overview
+
+{1-2 sentence summary}
+
+### Background
+
+{Why is this feature needed}
+
+### Goals
+
+- Goal 1
+- Goal 2
+
+### Non-Goals
+
+- What we won't do this time 1
+- What we won't do this time 2
+
+### Tech Stack Context
+
+**Existing Technology:**
+
+- Backend: {FastAPI, Django, Express, etc.}
+- Frontend: {React, Flutter, Vue, etc.}
+- Database: {PostgreSQL, MySQL, MongoDB, etc.}
+- Infrastructure: {GCP, AWS, Azure, etc.}
+
+**New Technology Required for This Feature:**
+
+- {New library/service 1} - {Reason}
+- {New library/service 2} - {Reason}
+
+**External API/Service Integration:**
+
+- {Service name} - {Purpose}
+
+**Constraints:**
+
+- Cost limit: {Amount}
+- Performance requirements: {Target response time, throughput, etc.}
+
+---
+
+## 2. User Stories
+
+### Story 1: {Story Title}
+
+**As a** {User role}
+**I want** {Desired functionality}
+**So that** {Reason/Value}
+
+#### Acceptance Criteria
+
+- [ ] {Verifiable condition 1}
+- [ ] {Verifiable condition 2}
+
+---
+
+## 3. Requirements (EARS Format)
+
+### REQ-001: {Requirement Title}
+
+**WHEN** {Specific condition}
+**THEN** {System behavior} (SHALL | SHOULD | MAY)
+
+#### Acceptance Criteria
+
+- [ ] {Testable criterion 1}
+- [ ] {Testable criterion 2}
+
+#### Example
+
+```text
+Input: {...}
+Output: {...}
+```
+
+---
+
+## 4. Non-Functional Requirements
+
+### Performance
+
+- Response time: {Target}
+- Throughput: {Target}
+
+### Security
+
+- Authentication: {Method}
+- Authorization: {Rules}
+
+### Scalability
+
+- Expected growth rate: {Value}
+
+---
+
+## 5. Data Model (Draft)
+
+### Entity: {Name}
+
+```json
+{
+  "field1": "type",
+  "field2": "type"
+}
+```
+
+---
+
+## 6. API Contract (Draft)
+
+### Endpoint: {Name}
+
+```text
+POST /api/v1/resource
+Request: {...}
+Response: {...}
+```
+
+---
+
+## 7. Test Strategy
+
+### BDD Scenarios (Gherkin)
+
+**Generate Command**: `vibe feature "{feature name}"`
+
+```gherkin
+Scenario: {Scenario title}
+  Given {Precondition}
+  When {User action}
+  Then {Expected result}
+```
+
+**Mapping**:
+
+- REQ-001 → Scenario 1, 2
+- REQ-002 → Scenario 3
+
+### Contract Tests (API Schema)
+
+**Generate Command**: `vibe contract "{feature name}"`
+
+**Backend Contract**:
+
+```json
+{
+  "request": {
+    "method": "POST",
+    "path": "/api/v1/{resource}",
+    "schema": {JSON Schema}
+  },
+  "response": {
+    "status": 201,
+    "schema": {JSON Schema}
+  }
+}
+```
+
+**Frontend Contract**:
+
+- Independent testing with mock server
+- Response schema validation (Zod, JSON Schema)
+
+### Test Coverage Goals
+
+- [ ] BDD: Cover all Acceptance Criteria
+- [ ] Contract: Cover all API endpoints
+- [ ] Unit: 70%+ coverage
+- [ ] Integration: Cover critical paths
+
+---
+
+## 8. Out of Scope
+
+- ❌ {Excluded item 1}
+- ❌ {Excluded item 2}
+
+---
+
+## 9. Verification Checklist
+
+### Requirements
+
+- [ ] Are all requirements testable?
+- [ ] Is SHALL/SHOULD/MAY clear?
+- [ ] Are Acceptance Criteria specific?
+- [ ] Are performance goals measurable?
+
+### Testing
+
+- [ ] BDD Feature file generation complete?
+- [ ] Contract tests defined?
+- [ ] Step Definitions written?
+- [ ] Test coverage goal achieved?
+
+---
+
+## 10. Approval
+
+- [ ] User approval
+- [ ] Technical review complete
+- [ ] Test plan approved
+
+Approval Date: ____________
+Approver: ____________

package/vibe/ui-ux-data/charts.csv

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