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