可视化导论学习入口 · 2026
看见数据，
读懂关系。
从一张数据表开始，学习如何选择视觉通道、安排颜色、处理维度，并把分析过程组织成能被理解的图形。
- 05
- 核心章节
- 27
- 知识小节
- 05
- 交互实验组
YOUR ROUTE
把零散知识连成一条路径
建议按顺序完成 5 个阶段。每个小节都可以在“讲解、代码、演示”之间切换。
0/ 5 章完成
完成第一章后，你会得到一个可继续使用的数据准备框架。
THE BIG PICTURE
一张图看懂课程结构
五个阶段不是孤立的软件技巧，而是一条连续的判断链：数据是什么 → 如何编码 → 怎样让人看见 → 如何组织叙事。
先问“这是什么数据”
分类、有序、区间还是比例？类型决定哪些视觉编码成立。
再问“怎样映射”
位置、长度、面积、颜色各有精度边界，选错通道会放大误读。
最后问“读者能理解吗”
颜色、坐标、曲线与时间结构共同决定图形是否准确、可读、可记。
COURSE CHAPTERS
按问题进入章节
5 个章节
DATA · 5 小节
数据：先理解，再表达
从数据生成、DIKW、测量尺度到 D3 数据变换与 join 三态，建立后续所有可视化的基础。
PIPELINE · 4 小节
流程：从表格到图形
把数据流模型、分类树、Reingold-Tilford 布局与事件机制串成一条可调试的渲染链路。
COLOR · 8 小节
色彩：让含义可区分
理解颜色空间、colormap、Lab 色域和科研配色，并用色觉缺陷视角检验图形。
2D ENCODING · 5 小节
低维：用位置表达关系
从宽长表转换、三层坐标、曲线拟合到 45° 倾角与 Marching Squares 等值线。
TIME · 5 小节
时序：看见变化与故事
比较折线、日历热图、螺旋时间与 Storyline，理解不同时间结构适合回答什么问题。
没有找到匹配章节
可以试试“颜色”“坐标”“数据”或“时间”。
HOW TO LEARN
每一节都按同一个学习闭环展开
先建立概念，再查看代码，最后亲手改变参数。三种内容共用同一个案例，减少“听得懂、做不出”的断层。
先理解
用通俗讲解回答“为什么这样设计”，并标注关键假设与常见误区。
再看代码
聚焦关键函数与参数，用可复制的代码连接概念和实际实现。
最后实验
调整数据、比例、颜色或时间范围，观察图形如何变化、何时失效。
ABOUT THE COURSE
可视化不是给数据加装饰，
而是为理解建立结构。
《可视化导论》围绕数据、视觉编码与人的感知展开。网站把理论、D3 代码与可交互实验放在同一页面，方便课堂讲解与课后复习。
课程内容参考陈为《可视化导论》及 Mackinlay、Stevens、Cleveland、Card 等人的经典研究，并加入适合网页与 D3.js 学习的实践案例。
中国石油大学（华东）· 授课教师：李昕