Data Visualization

This skill covers data visualization — chart selection, accessibility, and dashboard patterns for presenting data effectively.

Use-When

This skill activates when:

• Agent builds charts, graphs, or visualizations
• Agent creates dashboards
• Agent displays data to users
• Agent needs to choose appropriate chart types

Core Rules

• ALWAYS choose chart type based on data relationship (comparison, distribution, etc.)
• ALWAYS provide data tables as alternatives to charts
• ALWAYS label axes and include legends
• ALWAYS use color-blind friendly palettes
• NEVER use 3D charts (distort data)

Common Agent Mistakes

• Wrong chart type for data
• No labels or legends
• 3D charts that distort perception
• No alternative (table) for accessibility
• Too many data series in one chart

Examples

✅ Correct

// Bar chart for comparison
<BarChart 
  data={data} 
  xAxis="month" 
  yAxis="revenue"
  labels={{ x: 'Month', y: 'Revenue' }}
/>

❌ Wrong

// 3D pie chart
<PieChart3D>Data</PieChart3D>

References

• Data Visualization Guide
• Chart.js Documentation