数据可视化设计师

先解决什么问题

拿到一份 CSV 或 JSON 数据，知道该画什么图吗？

很多人在数据分析的可视化环节卡住，不是因为没有工具，而是缺一个系统的设计思路：

• 图表选型随意：把比例关系画成折线图，趋势对比用饼图，信息完全失真。
• 配色缺乏章法：红绿搭配让色盲用户无法分辨，颜色太多让图表变成调色盘。
• 布局与标注缺失：图例位置随意、坐标轴没有说明、关键数据点没有标注，读者需要猜。
• 交互设计失控：加了过多动态效果和筛选器，图表本身反而看不清。

data-viz-designer 针对这些问题，提供了一个结构化的可视化设计工作流。

技能如何工作

这个技能的核心是五步工作流，每一步都有明确的目标：

1. 数据探索与分析

技能会先读取你的数据（支持 CSV、JSON、Excel 等格式），进行初步探索，识别关键指标和趋势，理解数据背后的故事，而不是直接开始画图。

2. 图表类型选择

基于数据特征，技能会选择合适的图表类型：

• 类别对比 → 柱状图
• 时间趋势 → 折线图、面积图
• 组成比例 → 饼图、环形图、堆叠柱状图
• 相关性 → 散点图、气泡图
• 分布 → 直方图、箱线图
• 层级结构 → 矩形树图、旭日图
• 地理数据 → 地图、热力图

3. 布局与样式设计

确定图表的整体结构：视觉层级、配色方案（优先考虑色盲友好）、字体、图例位置、坐标轴样式。目标是让图表既好看又可读。

4. 细节调优

微调颜色组合（主色、强调色、背景色）、字体大小、间距，添加数据标签、注释和参考线，配置图例和交互提示框。

5. 交互功能（可选）

根据需要添加筛选、缩放、悬停提示等交互，支持下钻查看更细粒度数据。原则是交互服务于理解，而不是制造复杂度。

最终输出可直接在浏览器运行的 HTML/CSS/JavaScript 代码，推荐使用 ECharts、D3.js 或 Chart.js。如果需要图片格式，输出 SVG 或 PNG。

适用边界与注意点

• 不替代数据洞察：技能负责把数据可视化出来，但"数据背后说明了什么"仍需要人来判断。
• 需要结构化数据输入：技能接受表格类数据，如果是非结构化文本或复杂的业务报告，需要先整理成 CSV 或 JSON 格式。
• 图表类型优先于视觉炫酷：技能明确要求"选择最符合数据特征的图表，而非追求视觉上的花哨"。
• 交互不宜过度：交互的目的是降低理解门槛，如果交互操作反而增加了认知负担，应该简化或移除。
• 移动端适配：需要注意响应式尺寸和触摸交互的支持。