这书阐释了制作可视化数据图表的基础科学方法论,及其怎样融合D3高效率、迅速地建立可视化图表。
这书以一个故事刚开始,阐释制作可视化数据图表的基础科学方法论,及其怎样融合D3高效率、迅速地建立可视化图表。这书最先表述了数据可视化的基础内涵,及其D3的适用范围,随后从一个实际的事例下手,告知人们如何去选择适合的数据集,以哪些的方式来呈现数据,另外对SVG开展了基本埋下伏笔。在D3一部分,这书详细介绍了D3的关键定义“挑选集”与“数据联接”,另外对数据联接的好多个經典情景开展了演译,还融合D3详细介绍了制图所要把握的坐标系统、比例尺精度等基本要素。在数据载入层面,这书解读了D3能够分析的多种多样数据文件格式,及其从后端开发载入数据的多种多样方式 ,另外表述了D3动漫的制作方法,为制作互动式图表确立了基本。*后,这书表明了把握D3的不二法门,并期待阅读者可以持续实践活动、坚持不懈。本书写作风格轻松愉快、內容浅显易懂,既合适D3新手新手入门,也有利于有一定工作经验的前端工程师者迅速把握D3。
目录
- 1 以图叙事和 D3 1
- 1.1 可视化,已可视 1
- 1.2 图表赋予数据一种形式,该形式阐述了数据的内涵 2
- 1.3 质量:内容为王 4
- 1.4 设计:形式至上 5
- 1.5 以图叙事 6
- 1.6 开启 D3 7
- 1.7 设计师为什么喜欢 D3 8
- 1.8 程序员为什么钟爱 D3 8
- 1.9 什么时候不该使用 D3 9
- 1.10 D3的使用要点 9
- 1.11所需工具 10
- 1.12小结 11
- 2 发掘并图解案例 13
- 2.1 开始 13
- 2.2 世界正在变老吗 14
- 2.3 发现并研究数据 15
- 2.4 打磨概念 18
- 2.5 选择形式 19
- 2.5.1 用柱形图展示数据 19
- 2.5.2 用堆积柱形图展示数据 20
- 2.5.3 用线图展示数据 22
- 2.5.4 用饼图展示数据 23
- 2.5.5 用条形图展示数据 25
- 2.5.6 用多个微型条形图展示数据 26
- 2.5.7 选图建议— —思维导图 28
- 2.6 本书将构建的例子 30
- 2.7 小结 31
- 3 可缩放矢量图形 33
- 3.1 原理一瞥 33
- 3.2 到底什么是 SVG 33
- 3.3 用 D3绘制圆形 34
- 3.4 在 Web Inspector中查看 SVG 36
- 3.5 通过 CSS改变 SVG元素的风格 37
- 3.6 其他图形 39
- 3.6.1 矩形 39
- 3.6.2 圆角矩形 40
- 3.6.3 圆形 40
- 3.6.4 椭圆 41
- 3.6.5 多边形 41
- 3.6.6 线 42
- 3.6.7 路径 42
- 3.7 SVG文本 43
- 3.8 SVG样式属性 46
- 3.8.1 颜色和透明 46
- 3.8.2 笔触属性 47
- 3.9 绘图顺序和编组 49
- 3.10变形 51
- 3.11用 SVG构建条形图 53
- 3.12小结 66
- 4 用 D3选择集操控网页 67
- 4.1 配置 D3 67
- 4.2 选择元素 68
- 4.2.1 使用 CSS选择器创建选择集 71
- 4.2.2 从其他选择集中新建选择集 72
- 4.2.3 将选择集赋值为变量 72
- 4.3 通过选择集修改属性 72
- 4.3.1 attr()的工作原理 74
- 4.3.2 使用 attr()应用样式类和规则 76
- 4.4 声明式的 D3 77
- 4.5 链式方法调用 77
- 4.5.1 在链式调用过程中新建选择集 79
- 4.5.2 链式调用和变量赋值 80
- 4.6 添加元素 80
- 4.7 串在一起 82
- 4.8 用 d3.selectAll()选中多个元素 84
- 4.9 使用选择集制作条形图 85
- 4.9.1 使用变量 96
- 4.9.2 数学运算 98
- 4.9.3 使用更好的变量 98
- 4.9.4 为数据使用变量 99
- 4.9.5 进行显式约束 100
- 4.9.6 使用循环 101
- 4.10小结 107
- 5 数据连接:进入 109
- 5.1 什么是数据连接 109
- 5.2 数据连接的核心概念:进入 110
- 5.3 进入并绑定数据 112
- 5.4 使用数据连接制作条形图 115
- 5.5 使用匿名函数访问绑定数据 120
- 5.6 完成图形的剩余部分 123
- 5.7 在对象中存储数据 123
- 5.8 小结 129
- 6 缩放图形并添加轴线 131
- 6.1 线性比例尺 131
- 6.2 灵巧地使用边距规范 137
- 6.3 添加坐标轴 139
- 6.4 序数比例尺和坐标轴 147
- 6.5 小结 160
- 7 加载并过滤外部数据 161
- 7.1 使用人口分布数据构建图形 161
- 7.2 D3兼容的数据格式 162
- 7.3 创建服务器并上传数据 163
- 7.3.1 通过命令行初始化服务器 163
- 7.3.2 创建索引文件 164
- 7.4 D3加载数据的方法 165
- 7.4.1 回调方法 165
- 7.4.2 D3如何解析 CSV表格 166
- 7.5 处理异步请求 169
- 7.5.1 用外部数据创建条形图 170
- 7.5.2 优化条形图 172
- 7.6 加载和处理大(超大)数据集 175
- 7.7 合并内容 178
- 7.8 小结 180
- 8 为图形添加交互和动画效果 181
- 8.1 数据连接:更新和退出 181
- 8.2 交互按钮 185
- 8.2.1 用数据连接创建按钮 186
- 8.2.2 让按钮更方便点击 192
- 8.3 更新图形 195
- 8.4 添加转场动画效果 199
- 8.5 使用键 200
- 8.6 小结 202
- 9 添加播放按钮 203
- 9.1 在方法中封装更新阶段 203
- 9.2 在页面上添加播放按钮 207
- 9.3 点击播放 209
- 9.4 允许用户中断播放 212
- 9.5 小结 217
- 10 修行靠自身 219
- 10.1本书是学习 D3的基础 219
- 10.2如何克服障碍 220
- 10.3持续编码 222
- 10.4小结 222
- 附录 A JavaScript入门 223
- A. JavaScript简介 223
- A.浏览器中的 JavaScript控制台 223
- A.基本运算、变量及数据类型 224
- A.在页面和js文件中编写 JavaScript代码 227
- A.数组和对象 229
- A.方法和函数 232
- A. if语句和 for循环 233
- A.调试 237
- 附录 B 整理人口分布数据 241