chartlisted

# Chart — Data Visualization ## Activate When - User invokes `/godmode:chart` - User says "create a chart", "visualize this data", "make a graph" - User says "build a dashboard", "display metrics", "plot this" - When building reporting pages or analytics dashboards - When `/godmode:plan` identifies data visualization tasks - When `/godmode:review` flags visualization accessibility or usability issues ## Workflow ### Step 1: Data & Intent Discovery Understand the data and what the visualization needs to communicate: ``` VISUALIZATION DISCOVERY: Project: <name and purpose> Data source: <API endpoint | database query | static JSON | CSV | real-time stream> Data shape: <rows x columns, field names, types> Audience: <executives | engineers | end-users | public> Goal: <compare | trend | distribute | correlate | compose | flow | geospatial> Interactivity: <static | hover tooltips | click-to-filter | drill-down | real-time> Environment: <React | Vue | Angular | vanilla JS | server-side PDF | Jupyter> Existing library: <D3.js | Chart.js | Recharts | Plotly | Nivo | Victory | none> Constraints: <bundle size limit | IE support | print-friendly | offline | color-blind safe> ``` If the user hasn't specified, ask: "What story should this visualization tell? Who is the audience?" ### Step 2: Chart Type Selection Select the optimal chart type based on the data and communication goal: ``` CHART TYPE SELECTION: | Goal | Recommended Chart Types | |--|--| | Compare values | Bar (vertical/h