VISUALIZATION · INTRODUCTION

《可视化导论》

从数据到图表:JavaScript + D3.js 实战课程

中国石油大学(华东)· 授课教师:李昕 · 主要参考教材:陈为《可视化导论》

📚 课程章节

点击任一卡片进入该章节,每章节含 3 个 tab:📖 讲解 / ⌨️ 关键代码 / ▶️ 演示。

✅ 已上线
第 1 章

数据

对应你的文档:3. 数据

从 DeepSeek 合成新生数据出发,展开数据生成、DIKW、Stevens 测量尺度、Mackinlay 视觉通道、D3 数据变换与 Data-Join 三态。

  • DIKW 金字塔
  • Stevens 4 尺度
  • 8 个 D3 变换函数
  • Selection 三态
进入章节 →
✅ 已上线
第 2 章

数据可视化流程

对应你的文档:4. 数据可视化流程

Card 数据流模型、新生数据 → 分类树 → 树形列表的完整链路,Reingold-Tilford 布局、DOM 事件机制。

  • Card 模型
  • d3.rollup
  • Reingold-Tilford
  • 事件委托
进入章节 →
✅ 已上线
第 3 章

色彩专题

独立专题:颜色是可视化基础

颜色模型 + colormap + Lab 色域 + 5 大色系 + 经典科研配色 + 对错案例 + 鲜艳+低饱和哲学生成器 + CVD 论文图测。8 小节,配色一站式。

  • 4 颜色空间 + CVD
  • Wong / Paul Tol
  • 5 大色系规则
  • 鲜艳+低饱和
  • CVD 论文图测
进入专题 →
✅ 已上线
第 4 章

低维数据可视化

对应你的文档:5. 低维数据可视化

Crime 数据坐标变换、10 种曲线拟合、Cleveland 45° 倾角、Marching Squares 等值线,共 5 小节。

  • 三层坐标变换
  • 10 种曲线
  • Cleveland 45°
  • Marching Squares
进入章节 →
✅ 已上线
第 5 章

时序数据可视化

对应你的文档:6. 时序数据可视化

5 个时间属性、法国人名时间序列、van Wijk 日历热图、阿基米德螺旋日历、Storyline 故事线(《侏罗纪公园》案例)。

  • 时间分解
  • 日历 colormap
  • 极坐标变换
  • Storygraph
进入章节 →

▶️ 使用方式

🎓 课堂讲解

打开任一章节后,左侧选小节,顶部切换 讲解 / 代码 / 演示 三个 tab,一边讲解、一边实时运行。

📖 学生自学

按章节顺序过完所有 ⭐ 关键点,每个关键点配有「为什么这么写」+「有什么坑」段落。

💻 教师备课时

每个章节有 1 套独立的 demo/ 子目录,可以单独跑、单独改、单独打包给学生。

📶 局域网使用

若公网不通,可在本机跑 python -m http.server 8080,学生连同一 WiFi 即可访问。

ℹ️ 关于本课程

📖 理论来源

陈为《可视化导论》、Mackinlay 1986、Stevens 1946、Cleveland 1984、Bostock D3 官方文档、Card 1999 数据流模型。

🎯 设计原则

案例为中心(不是理论为中心)。每个知识点都嵌入到用户的实践案例里,配 ⭐ 关键点解释 + 可运行演示。

🛠️ 技术栈

零依赖:纯 HTML + CSS + ES modules + D3.js v7 (CDN)。本地一条命令 python -m http.server 启动,无需 npm。

📦 数据集

新生数据 CSV 与 Crime 数据等都已打包进 data/ 目录,浏览器 fetch 加载,离线可用。