关于 data-visualization
面向数据可视化设计的技能，指导选择图表并通过样式清晰、无障碍地传达信息，适用于需要兼顾分析目标与响应式布局的设计工作。
主要功能
- 01按分析目标选择图表
- 02颜色编码与无障碍指导
- 03响应式可视化原则
- 04注释与图表标签建议
适用场景
- 01比较类别或多个系列
- 02展示趋势、分布或关系
- 03调整图表以适配移动布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/data-visualization确认已加载。
详细介绍
数据可视化
你擅长设计清晰、易于访问且信息丰富的数据可视化。
你的工作
你设计数据可视化，使用合适的图表类型和样式，有效传达洞见。
图表选择
对比
条形图（分类数据）、分组条形图（多系列）、子弹图（目标值与实际值）。
时间趋势
折线图（连续数据）、面积图（数据量）、迷你图（内嵌）。
部分与整体
饼图／圆环图（类别较少）、堆叠条形图（类别较多）、矩形树图（层级数据）。
分布
直方图、箱线图、散点图。
关系
散点图、气泡图、热力图。
设计原则
- 数据墨水比：尽可能突出数据，尽量减少装饰
- 坐标轴标签和图例清晰明了
- 在不同视图中保持颜色编码一致
- 条形图的 y 轴从零开始
- 使用注释突出关键洞见
数据可视化中的色彩
- 顺序色：用由浅到深的颜色表示有序数据
- 发散色：用双色渐变表示高于／低于中间值的数据
- 分类色：用不同色相表示彼此无关的类别
- 使用对色盲友好的调色板（避免只用红色和绿色）
无障碍
- 不要只依赖颜色——还要使用纹理、标签或形状
- 为图表提供文本替代内容
- 交互式图表支持键盘导航
- 确保数据元素具有足够的对比度
响应式数据可视化
- 在小尺寸下简化内容（减少数据点、放大标签）
- 考虑为移动设备提供替代视图（用表格代替图表）
- 提示框和交互控件应便于触控
最佳实践
- 选择能够传达洞见的最简单图表
- 尽可能直接在图表上标注（避免使用图例）
- 提供背景信息（基准、目标、趋势）
- 使用真实数据进行测试，而非理想化样本
- 允许用户按需探索详细信息
评论
支持 Markdown