Lab 2 · 可视化方案构建

在动手画图之前，先回答：这个可视化要回答什么问题？

好的分析目标示例：

• 展示某地区空气质量的时间变化趋势

• 比较不同产品类别的销售占比分布

• 探索用户年龄与消费金额之间的相关性

反例（太空泛）："展示数据"、"做一个仪表盘"。

将分析目标写进实验报告开头，后续所有设计决策都以此为锚点。

使用 Bertin 视觉编码层次，分析每个数据字段适合的视觉通道：

视觉通道层次（从强到弱）：

位置 > 颜色（色相）> 颜色（饱和度）> 大小 > 形状 > 纹理 > 方向 > 模糊度

字段分析表（填写到实验报告）：

| 数据字段 | 类型 | 语义角色 | 推荐视觉通道 | 优先级 |

| 时序数值 | 连续-时序 | 趋势 | 位置（x轴时间）| ★★★ |

| 分类属性 | 分类 | 分组/对比 | 颜色（色相）| ★★★ |

| 数值量级 | 连续 | 大小/重要度 | 大小/饱和度 | ★★☆ |

| 地理坐标 | 连续-空间 | 位置 | 投影位置 | ★★★ |

根据数据字段组合选择图表：

时序 + 单一数值 → 折线图（Line Chart）

分类 + 数值 → 柱状图（Bar Chart）/ 饼图（Pie Chart）

两个连续变量 → 散点图（Scatter Plot）

地理 + 数值 → 地图可视化（Choropleth / Bubble Map）

分布 → 直方图（Histogram）/ 密度图（Density Plot）

多分类 + 多数值 → 雷达图 / 分组柱状图

关系网络 → 力导向图（Force-Directed Graph）

注意：不要用饼图展示超过 7 个类别（人类对角度的辨识力弱）。

在纸上或 Figma 中绘制多图表联动布局草图，标注：

① 每个子图表的位置与尺寸

② 图表之间的数据联动关系（点击 A 图 → B 图高亮）

③ 色彩方案（建议使用 d3.schemeTableau10 等 D3 内置调色板）

布局原则（Tufte）：

• 数据墨水比最大化：优先显示数据，删除装饰性元素

• 最小图表噪音：网格线只在有助于读数时才加

• 充分利用画布：不要留大片空白

将草图拍照或导出 PDF，附在实验报告中。