# 第 4 章 低维数据可视化

> **本讲义配套集成教学页面**：[`./index.html`](./index.html)（讲解 ⇄ 代码 ⇄ 演示 三 tab 自由切换）
>
> 推荐教学用法：浏览器打开 lesson 页面 → 左侧选章节 → 三个 tab 来回切（讲解看原理、代码看 ⭐ 关键点、演示看实际效果）。

---

## 4.1 数据转换

> 你的 Crime 数据是宽格式，可视化常需要长格式。转换函数一行解决。

### 🎨 本节使用了 colormap（Viridis）画热图。colormap 理论详见
              第 3 章 3.2 colormap 三类选择。
            你的原案例
原 5.1 节用了 1985 美国 50 州犯罪数据（CSV），含 8 个犯罪指标列。

### 嵌入陈为教材理论

- 长格式（long）：每行一个观测，列 = 字段（如 {state, metric, value}）。优点：方便过滤、分组、绑定到 d3 join。
- 宽格式（wide）：每行一个实体，列 = 指标（如 {state, murder, robbery, ...}）。优点：人眼读得懂、直观。
- 转换：flatMap + 循环键名 = 几行代码搞定。
- d3.autoType：自动推断列类型（数字、日期、布尔），省得手动 +d.field。

---

## 4.2 坐标轴变换

> 数据空间 → 坐标系空间 → 屏幕空间。三层职责分明，错了就乱套。

### 你的原案例
原 5.1.2 节用散点展示 Crime 数据（murder vs robbery），坐标轴是 1985 数据。

### 嵌入陈为教材理论

- 

1. 三层空间：
                
                  数据空间：原始数值（如人口 27058000、谋杀率 8）
1. 坐标系空间：归一化到 0..innerWidth（标准化坐标）
1. 屏幕空间：加上 margin 偏移（最终像素位置）

- 为什么分层：坐标系空间内的元素（线、点）可以共享，切换屏幕尺寸时无需重算。d3.axisBottom 自动帮你做坐标系→屏幕。
- 

- scale 选型：
                
                  scaleLinear：均匀分布，最常用
- scaleLog：跨数量级（人口从 53 万到 2700 万）
- scaleSqrt：面积感知（圆面积映射到值）
- scaleBand：类别轴（柱状图）

---

## 4.3 曲线拟合

> 同 50 个点，用 10 种 line.curve 画风各异。什么时候用哪种？

### 你的原案例
原 5.1.3 节用折线 + 散点展示趋势。原始代码用了 curveCatmullRom，没讲为什么。

### 嵌入陈为教材理论

- 

- 插值 vs 拟合：
                
                  插值（interpolation）：曲线经过所有数据点（如 Catmull-Rom、Natural）
- 拟合（fitting）：曲线不经过数据点，只反映趋势（如线性回归 LOESS）

- d3.line().curve() 提供 10+ 种 curve，最常用：
- step 系：用于离散阶跃（数字信号、状态切换）
- catmullRom / natural：过所有点的张力样条，"看起来平滑"
- monotoneX：保持原数据序列单调（不会出现伪震荡）
- 选择原则：数据有顺序性 → monotoneX / linear；数据本身抖动大 → catmullRom / basis 平滑；离散状态 → step

---

## 4.4 倾角感知（45° 黄金角）

### 你的原案例
原 5.1.4 节提到"平均倾斜度最优为 45°"，但没解释原因。

### 嵌入陈为教材理论

- 

- Cleveland 1984 实验：让被试估计直线的斜率，发现：
                
                  斜率 = 0° 或 90° 时，估计误差最大
- 斜率 = 45° 时，估计最准
- 呈 U 型曲线

- Stevens 幂律：感知斜率 ≈ (真实斜率)^1.0 ~ 1.3。即人眼把"陡度"夸张了 30%。
- 

- 设计原则：
                
                  关键数据斜率落在 30°~60° 区间最稳
- 对比增长曲线时，用 log 轴让陡度落在 45° 左右
- 避免在 5° 以下或 85° 以上做趋势对比（误差太大）

---

## 4.5 等值线（Marching Squares）

### 你的原案例
原 5.2.2 节用 Marching Squares 提取 Crime 数据的等值线。原始代码是截图占位。

### 嵌入陈为教材理论

- Marching Squares 原理：把标量场离散化为网格，每个 cell 4 个角的"是否大于阈值"决定 case 编号 0~15（2⁴=16 种）。每种 case 对应 0/1/2 条线段，把"超过阈值"和"未超过阈值"的两片区域分开。
- 16 种 case：编码 bit0=BL、bit1=BR、bit2=TR、bit3=TL。
- 扩展到 3D：Marching Cubes（Lorensen & Cline 1987），2⁸=256 种 case，常用于医学 MRI / CT 等值面提取。
- 

- 应用场景：
                
                  地形等高线（地图）
- 医学影像（MRI/CT 等值面）
- 密度等高图（核密度估计）
- 天气预报（等温线、等压线）

---