📚 课程章节
点击任一卡片进入该章节,每章节含 3 个 tab:📖 讲解 / ⌨️ 关键代码 / ▶️ 演示。
数据
对应你的文档:3. 数据
从 DeepSeek 合成新生数据出发,展开数据生成、DIKW、Stevens 测量尺度、Mackinlay 视觉通道、D3 数据变换与 Data-Join 三态。
数据可视化流程
对应你的文档:4. 数据可视化流程
Card 数据流模型、新生数据 → 分类树 → 树形列表的完整链路,Reingold-Tilford 布局、DOM 事件机制。
色彩专题
独立专题:颜色是可视化基础
颜色模型 + colormap + Lab 色域 + 5 大色系 + 经典科研配色 + 对错案例 + 鲜艳+低饱和哲学生成器 + CVD 论文图测。8 小节,配色一站式。
低维数据可视化
对应你的文档:5. 低维数据可视化
Crime 数据坐标变换、10 种曲线拟合、Cleveland 45° 倾角、Marching Squares 等值线,共 5 小节。
时序数据可视化
对应你的文档:6. 时序数据可视化
5 个时间属性、法国人名时间序列、van Wijk 日历热图、阿基米德螺旋日历、Storyline 故事线(《侏罗纪公园》案例)。
▶️ 使用方式
🎓 课堂讲解
打开任一章节后,左侧选小节,顶部切换 讲解 / 代码 / 演示 三个 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 加载,离线可用。