# 第 5 章 时序数据可视化

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

---

## 5.1 时间属性

> 时间有 5 个核心属性：有序 / 连续 / 周期 / 独立于空间 / 结构性。每个属性都影响可视化设计。

### 你的原案例
原 6.1 节列出 5 个时间属性，没有可视化。这章把这 5 个属性变成可交互卡片。

### 嵌入陈为教材理论

- 有序性：时间是有序的，两个事件有先后次序，与因果关系紧密相连。
- 连续性：时间连续，两个时间点之间总存在另一个时间点。
- 周期性：自然过程常有循环规律（季节、昼夜），可采用循环时间域。
- 独立于空间：时间与空间紧相关，但科学过程大多独立处理。
- 结构性：时间尺度分年/月/日/时/分/秒，分割既有自然反映（昼夜）也有人为定义（60 秒）。

### 为什么 5 个属性都重要？
设计时序图前先想清楚这 5 个属性，能避免常见错误：

- 有序性缺失 → 散点图错位成噪声
- 连续性混淆 → 离散数据用错连线
- 周期性忽略 → 季节趋势被"抹平"
- 结构性不匹配 → 工作日/周末、闰年都出错

---

## 5.2 标准时间可视化（折线图）

> x 轴 = 时间，y 轴 = 度量。最常见的时序图：法国人名 1900-2020 的使用频率。

### 你的原案例
原 6.2.1 节用折线图展示法国几十年人名（Marie / Jean / Camille）的使用频率变化。
            原始页面附带"词云 + 鼠标高亮 + 时间段筛选"，但代码只给了关键折线段。

### 嵌入陈为教材理论

- 标准时序图本质：二维线图，x = 时间，y = 度量。优势是在线性时间域中的变化趋势一目了然。
- 缺点：难以表达周期性——所以才有了 5.3 日历图和 5.4 螺旋图。
- 交互：鼠标 hover 高亮、tip 显示、筛选时间段——是数据新闻标配。
- 实战选择：数据点数 ≤ 50 用 linear；点数 50-500 用 monotoneX / curveCatmullRom；点数 > 500 才考虑面积 / 箱形。

---

## 5.3 日历热图（van Wijk）

> 以"年=行 / 周=列"展示全年数据，发现周期性 + 周内趋势 + 节假日异常。

### 你的原案例
原 6.2.2 节用日历热图展示 2024 年北京每日最高温度。每月之间用红线分隔。

### 嵌入陈为教材理论

- 日历热图 (Calendar Heatmap)：van Wijk 2008 提出，x = 周（年内的第几周），y = 星期几，颜色 = 数值。
- 适用场景：长时序（年）+ 周期性（星期 / 月）+ 异常检测（节假日、工作日 vs 周末）。
- 

- 设计要点：
                
                  每周从周日（或周一）开始——影响"周末"在视觉上的位置
- 月份之间用红线分隔——比 7×53 网格更易读
- colormap 用顺序型（如 Viridis）——见 第 3 章 3.2 colormap

### isMonthDivider 的巧妙之处
判断 7 天前与今天是否同月——是则同月分割线，否则需要画月线。这是日历可视化的核心算法。

---

## 5.4 周期时间可视化（阿基米德螺旋）

> 将时间沿圆周排列（螺旋 = 圆 + 持续展开）。发现周期性：每个回路 = 一个周期。

### 你的原案例
原 6.2.3 节用阿基米德螺旋（等速螺旋）布局日期，每个回路代表 1 年 / 1 月 / 1 周。每个日期对应螺旋上的一个扇环。

### 嵌入陈为教材理论

- 螺旋 vs 折线：折线在线性时间域表现"趋势"，但难以表现"周期"；螺旋沿圆周重复，能突出周期性。
- 阿基米德螺旋 (Archimedean Spiral)：r = a + bθ，等速展开（每转一圈半径增加常量 b）。
- 动态 Δθ 算法：原文档的精妙点——Δθ = boxSize / √(b² + r²)，让每个扇环的弧长近似相等，保持视觉一致性。
- 实战取舍：螺旋适合"年/季节/周"的循环，不适合"无周期"或"周期太长"。

### 关键路径生成
每个日期对应螺旋上的一个扇环——4 个关键点：起点外/终点外/终点内/起点内，闭合回起点。

---

## 5.5 Storyline 时间线（侏罗纪公园）

> 多角色叙事：每条线 = 一个角色 / 组织 / 进程，y 轴位置 = 聚散关系，时间 = 故事进展。

### 你的原案例
原 6.2.4 节用《侏罗纪公园》5 个角色（Alan / T-REX / Raptors / Malcolm / Dilophosaurus）做 Storyline 时间线。事件层用红色半透明圆圈标注关键冲突。

### 嵌入陈为教材理论

- Storyline 起源：2008 年斯坦福大学 Ogawa & Ma 提出，原本用于电影/学术合作者关系网。
- 核心：把每个角色/组织/进程抽象为"生命线"，线靠近 = 角色相遇 / 冲突，线分开 = 角色分离。
- 

1. 3 大元素：
                
                  时间尺度映射：电影时长 → SVG 宽度，x 轴严格按比例对齐
1. Catmull-Rom 样条：curveCatmullRom.alpha(0.5) 张力系数 0.5，"自然流动"但不"过度弯曲"
1. 事件层：半透明红圈 + 文字，标注关键转折点

- 应用场景：电影分析、案件多人时间线、体育比赛互动、项目任务交接。

### 为什么 Catmull-Rom 不用 monotoneX？
monotoneX 保证"不过度弯曲"但会让线"过于直"，失去叙事的"河流感"。Catmull-Rom 张力系数 0.5 是经验值——既能流动又不震荡。

---