Back to Details

data-visualization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
当以下情况发生时激活本技能：
  • Agent构建图表、图形或可视化内容
  • Agent创建仪表盘
  • Agent向用户展示数据
  • Agent需要选择合适的图表类型

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)
  • 务必根据数据关系（如对比、分布等）选择图表类型
  • 务必提供数据表格作为图表的替代方案
  • 务必为坐标轴添加标签并包含图例
  • 务必使用适合色弱人群的调色板
  • 绝对不要使用3D图表（会扭曲数据呈现）

Common Agent Mistakes

常见Agent错误

  • 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
  • 为数据选择了错误的图表类型
  • 未添加标签或图例
  • 使用会扭曲认知的3D图表
  • 未提供可访问性替代方案（如表格）
  • 单个图表中包含过多数据系列

Examples

示例

✅ Correct

✅ 正确示例

tsx
// Bar chart for comparison
<BarChart 
  data={data} 
  xAxis="month" 
  yAxis="revenue"
  labels={{ x: 'Month', y: 'Revenue' }}
/>
tsx
// 用于对比的柱状图
<BarChart 
  data={data} 
  xAxis="month" 
  yAxis="revenue"
  labels={{ x: 'Month', y: 'Revenue' }}
/>

❌ Wrong

❌ 错误示例

tsx
// 3D pie chart
<PieChart3D>Data</PieChart3D>
tsx
// 3D饼图
<PieChart3D>Data</PieChart3D>

References

参考资料