| 课时 | 课程内容 | 详细内容 | D3.js讲解 |
|---|---|---|---|
| 1 | 数据可视化简介 | 1.什么是可视化 2.为什么要可视化 3.课程规化：课程章节简介 4.课程基本信息 |
1.Web环境配置与Live Server使用 2.运行并调通D3第一个程序 3.HTML与SVG基础 4.JavaScript基础 |
| 2 | 视觉感知与认知 | 1.视觉感知 2.色彩：颜色空间 3.认知 |
|
| 3 | 数据可视化基础 | 1.可视化流程模型 2.可视化编码：格式塔理论 3.可视化设计 |
1.图元的增删查改 2.数据的读取 3.比例尺 4.坐标轴的绘制 5.Data-Join基础 6.第一个D3数据可视化样例 |
| 4 | 基本统计图表与 数据变化 |
1.数据变化 2.统计图表 3.基本设计原则 4.常用图表工具 |
1.D3-Transition的基本使用 2.D3动画的EASE与同步 3.D3的数字格式化 4.D3动画的自定义插值 5.绘制动态散点图，基于D3语法基础与动画 |
| 5 | 时空数据可视化（1） | 1.空间数据 2.标量可视化 |
|
| 6 | 时空数据可视化（2） | 1.向量可视化 2.张量可视化 3.时序数据可视化 |
1.图元<path> a.Path的常见属性 b.‘d’属性-‘笔画’的设置规则 2.D3.js的常用‘d’属性接口：d3.line() & d3.arc() 3.基于d3.line()绘制折线图 a.时间数据的处理与时间比例尺 b.单一图元的Data-Join，selection.datum(…) 4.基于d3.arc()绘制饼图 a.离散比例尺与D3.js的配色方 b.d3.pie() |
| 7 | 地理空间数据可视化 | 1.地图投影 2.地理数据可视化的方法和技术 a.点数据可视化 b.线数据可视化 c.区域数据可视化 3.主题地图 4.综合案例 |
1.JSON与geoJSON a.json的数据格式与读取 b.geoJson的数据格式 2.d3-geo a.地图数据(经纬度)到画布的映射(投影) b.‘d’属性接口：d3.geoPath() 3.基于d3-geo绘制北京市地图 4.等值线数据的输入与处理 5.基于d3-contour与d3-geo绘制等值线图 6.d3.scaleSequential：基于插值的连续比例尺 |
| 8 | 高维非空间数据可视化 | 1.数据维度 2.高维数据可视化 a.基于点的方法（散点图矩阵） b.基于线的方法（平行坐标） c.基于区域的方法（柱状、表格、像素图） d.基于样本的方法（星形、脸谱等） 3.数据交互 |
1.交互要素与流程 2.使用D3.js处理基础交互事件 3.基于交互的地图可视化 4.前端交互的事件传递：捕获、定向与冒泡 5.交互事件进阶 |
| 9 | 媒体数据可视化（1） | 1.文本 a.文本信息挖掘 b.文本视图绘制 |
1.使用D3.js的‘stack’接口将数据堆叠 a.数据堆叠后的格式 b.堆叠的取值与顺序 2.基于‘stack’实现堆叠柱状图 3.Data-Join嵌套、继承与传递 4.基于‘stack’与d3.area()实现主题河流 |
| 10 | 大实验选题汇报 | ||
| 11 | 媒体数据可视化（2） | 1.图像 2.视频 |
|
| 12 | 媒体数据可视化（3） | 3.音频 4.三维模型 |
|
| 13 | 层次数据可视化 | 1.层次数据 2.层次数据的可视化 a.节点链接法 b.空间填充法 c.混合型 |
1.层级数据的数据结构 2.d3.hierarchy：层级数据的处理与预计算 3.d3.tree & d3.partition：层级数据的划分与映射 4.基于‘d3.tree’实现树状图 5.d3.linkVertical() & d3.linkHorizontal() 6.基于‘d3.partition’实现冰锥图与日晕图 |
| 14 | 网络数据可视化 | 1.网络关系数据 2.网络关系数据的可视化 a. 节点链接布局 b.相邻矩阵 c.混合布局 3.图的简化 4.交互 5.工具与应用 |
1.网络数据的数据结构 2.基于<path>实现弧长连接图 3.基于‘d3.chord’与‘d3.ribbon’实现弦图 4.D3.js力模拟基础 5.基于‘d3-force’实现力导图 |
| 15 | 可视化交互与评估 | 1.一般交互系统 2.可视化交互的主要类型/分类 3.典型的交互范式 a.概览+细节 b.焦点+上下文 c.对偶界面 d.动画过渡 4.可视化技术和方法的用户评估 |