描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787115444356
在工作中，我们经常需要展示一些数据。如何选择合适的数据可视化方式，以及如何在 Web 上应 用和实现这样一种方式，这是我们经常会遇到的问题。通过阅读本书，你将学会如何使用 JavaScript、 HTML、CSS 构建实用而有效的数据可视化方案。本书给出了大量实际的例子，通过分步讲解的方式，详 细描述了可视化方案的创建、集成、调试的整个过程，以帮助读者迅速掌握像柱状图、折线图、散点图等 基本的数据可视化图形技术。 在掌握了基本图形的实现之后，本书还教授了如下这些高级的数据可视化技术： ● 创建树状图、热力图、网络图、文字云、时间轴； ● 地图数据的可视化映射、创建波形图和复合图表； ● 使用AJAX为图形添加交互行为； ● 在浏览器中管理数据，以及创建数据驱动的Web应用程序； ● 利用Flotr2、Flot、Chronoline.js、D3.js、Underscore.js、Backbone.js实现数据可视化。 本书适合想要学习 Web 上的数据可视化技术的读者，并能够帮助他们快速构建简单而强大的数据可视化方案。
数据可视化是实现数据价值的重要工具。数据可视化可以将抽象的数字累积转变成为图形、表单等，让普通人可以快速理解数据所代表的情况或趋势。 本书是学习如何用JavaScript实现数据可视化的一本实践指南。全书共10章，首先从一些基础的可视化方法开始，讲解了如何使用Flotr2库创建基本的图表；如何使用jQuery的Flot库、sparkline库；用JavaScript库实现不同于传统图表的特殊可视化；实现基于时间、地理位置的可视化效果；如何使用D3.js库和Underscore.js库；以及如何使用Yeoman和Backbone.js库构建数据驱动的Web应用。 本书重视数据可视化的设计和实现，重视基础知识，书中所列举的示例，兼顾易学性、复杂性、理论性和实用性。本书适合从事前端设计、数据可视化设计和实现的专业人士阅读，可以供有一定JavaScript基础并想要从事相关工作的程序员学习参考。
第1章 图像数据 1
1.1 创建基础的柱状图 2
1.1.1 第1步 引入所需的JavaScript代码 2
1.1.2 第2步 创建一个用来包含图表的
1.1.3 第3步 定义数据 3
1.1.4 第4步 绘制图表 4
1.1.5 第5步 改进纵轴 5
1.1.6 第6步 改进横轴 6
1.1.7 第7步 调整样式 8
1.1.8 第8步 多彩的柱体色彩 9
1.1.9 第9步 Flotr2可能会出现的一些“bug”及处理方案 11
1.2 用折线图来绘制连续数据 12
1.2.1 第1步 定义数据 12
1.2.2 第2步 绘制二氧化碳数据的图像 13
1.2.3 第3步 添加温度数据 14
1.2.4 第4步 改进图表的可读性 14
1.2.5 第5步 让用户理解右侧的温度标记 16
1.2.6 第6步 给图表添加标注 17
1.2.7 第7步 Flotr2“bugs”的应急方案 19
1.3 使用饼图强调部分数据 19
1.3.1 第1步 定义数据 20
1.3.2 第2步 绘制图表 21
1.3.3 第3步 标注数值 22
1.3.4 第4步 Flotr2“bugs”的应急方案 23
1.4 用离散图表绘制x/y值 23
1.4.1 第1步 定义数据 23
1.4.2 第2步 格式化数据 24
1.4.3 第3步 绘制数据 24
1.4.4 第4步 调整图表的轴 25
1.4.5 第5步 标注数据 26
1.4.6 第6步 阐明x轴 27
1.4.7 第7步 回答用户的问题 28
1.4.8 第8步 解决Flotr2的“bugs” 32
1.5 用气泡图表示数量扩展x/y数据 32
1.5.1 第1步 定义数据 32
1.5.2 第2步 给图表创建背景图 33
1.5.3 第3步 绘制数据 34
1.5.4 第4步 添加背景 35
1.5.5 第5步 给气泡上色 36
1.5.6 第6步 调整图例的样式 38
1.5.7 第7步 Flotr2“bugs”的应急预案 39
1.6 使用雷达图显示多维数据 39
1.6.1 第1步 定义数据 40
1.6.2 第2步 创建图表 42
1.6.3 第3步 Flotr2“bugs”的应急预案 43
1.7 小结 43
第2章 和图表进行交互 45
2.1 选择图表内容 46
2.1.1 第1步 包含需要的JavaScript类库 46
2.1.2 第2步 设置一个div元素来盛放图表 48
2.1.3 第3步 准备数据 48
2.1.4 第4步 绘制图表 49
2.1.5 第5步 添加控件 49
2.1.6 第6步 定义适合交互的数据结构 52
2.1.7 第7步 基于交互状态确定图表数据 53
2.1.8 第8步 使用JavaScript添加控件 55
2.1.9 第9步 响应交互控件的操作 56
2.2 缩放图表 58
2.2.1 第1步 准备页面 58
2.2.2 第2步 绘制图表 59
2.2.3 第3步 准备支持交互的数据 60
2.2.4 第4步 准备接受交互事件 60
2.2.5 第5步 开启交互 61
2.3 追踪数据的值 64
2.3.1 第1步 留出一个
2.3.2 第2步 准备数据 66
2.3.3 第3步 绘制图表 66
2.3.4 第4步 实施交互 70
2.4 使用AJAX获取数据 75
2.4.1 第1步 理解源数据 75
2.4.2 第2步 通过AJAX获得层的数据 76
2.4.3 第3步 处理层数据 80
2.4.4 第4步 获取实际数据 81
2.4.5 第5步 处理数据 84
2.4.6 第6步 创建图表 85
2.5 小结 88
第3章 在页面中整合图表 89
3.1 创建经典的sparkline 90
3.1.1 第1步 加载需要请求的JavaScript库 90
3.1.2 第2步 创建sparkline的HTML标签 91
3.1.3 第3步 绘制sparkline 92
3.1.4 第4步 调整图表样式 92
3.2 绘制多个变量 94
3.2.1 第1步 准备HTML标签 95
3.2.2 第2步 绘制图表 96
3.2.3 第3步 建立一套默认的图表样式 96
3.2.4 第4步 修改指定class的默认样式 97
3.2.5 第5步 为指定图表创建的样式 99
3.3 sparkline的注解 101
3.3.1 第1步 准备数据 102
3.3.2 第2步 准备HTML标签 102
3.3.3 第3步 添加图表 103
3.3.4 第4步 添加主要注释 103
3.3.5 第5步 提供附加信息 105
3.4 绘制复合图表 106
3.4.1 第1步 绘制交易量图表 106
3.4.2 第2步 添加收盘价图表 107
3.4.3 第3步 添加注解 108
3.4.4 第4步 把详情也当作图表来展示 109
3.5 对点击事件进行响应 110
3.5.1 第1步 添加图表 111
3.5.2 第2步 处理点击事件 111
3.5.3 第3步 改进过渡效果 113
3.5.4 第4步 添加动画效果 114
3.6 实时更新图表 115
3.6.1 第1步 获取数据 116
3.6.2 第2步 更新可视化 117
3.7 小结 118
第4章 创建特殊图表 119
4.1 用tree map来图像化层级 119
4.1.1 第1步 包含需要的类库 120
4.1.2 第2步 准备数据 120
4.1.3 第3步 绘制tree map 121
4.1.4 第4步 通过改变底色展示附加数据 122
4.2 用热力图突出显示地区 125
4.2.1 第1步 加载需要的JavaScript 126
4.2.2 第2步 定义可视化数据 127
4.2.3 第3步 创建背景图片 127
4.2.4 第4步 留出包含可视化内容的HTML元素 128
4.2.5 第5步 格式化数据 128
4.2.6 第6步 绘制地图 129
4.2.7 第7步 调整热力图的z-index 130
4.3 用网络图展示节点间的关系 130
4.3.1 第1步 加载需要的类库 130
4.3.2 第2步 准备数据 131
4.3.3 第3步 定义图表的节点 132
4.3.4 第4步 用边线链接节点 133
4.3.5 第5步 自动布局 134
4.3.6 第6步 添加交互 136
4.4 用文字云的形式展示开发语言的使用比例 139
4.4.1 第1步 加载需要的类库 139
4.4.2 第2步 准备数据 140
4.4.3 第3步 添加需要的标签 141
4.4.4 第4步 创建一个简单的云 142
4.4.5 第5步 添加交互 143
4.5 小结 146
第5章 时间轴显示 147
5.1 使用库构建时间轴 148
5.1.1 第1步 引入所需类库 148
5.1.2 第2步 准备数据 149
5.1.3 第3步 画出时间轴 150
5.1.4 第4步 为数据设置对应的Chronoline.js选项 151
5.2 使用JavaScript构建时间轴 154
5.2.1 第1步 准备好HTML结构 155
5.2.2 第2步 开始执行JavaScript 155
5.2.3 第3步 运用语义化的html来创建时间轴 156
5.2.4 第4步 添加内容说明 159
5.2.5 第5步 选择性地借助jQuery 161
5.2.6 第6步 用CSS解决时间轴的样式问题 161
5.2.7 第7步 为时间轴添加一些利于信息结构展现的样式 163
5.2.8 第8步 添加交互效果 165
5.3 使用Web组件 170
5.3.1 第1步 回顾标准组件 170
5.3.2 第2步 引入需要的组件 173
5.3.3 第3步 准备数据 173
5.3.4 第4步 创建一个默认的时间轴 175
5.3.5 第5步 调整时间轴样式 178
5.4 小结 181
第6章 地理位置信息的可视化 182
6.1 使用字体构建地图 183
6.1.1 第1步 在页面中引入地图字体组件 183
6.1.2 第2步 在页面中显示出某一个国家的地图 183
6.1.3 第3步 将多个国家整合进地图 185
6.1.4 第4步 根据数据的不同使各国呈现可视化上的差异 186
6.1.5 第5步 添加图例 188
6.2 使用SVG绘制可视化地图 189
6.2.1 第1步 创建SVG地图 191
6.2.2 第2步 在页面中嵌入地图 192
6.2.3 第3步 收集数据 193
6.2.4 第4步 定义色彩主题 195
6.2.5 第5步 为地图上色 196
6.2.6 第6步 加上图例 197
6.2.7 第7步 添加交互效果 198
6.3 将地图引入到可视化的背景中 201
6.3.1 第1步 建立Web页面 202
6.3.2 第2步 准备数据 203
6.3.3 第3步 选择地图样式 203
6.3.4 第4步 地图绘制 204
6.3.5 第5步 加上目击事件 205
6.4 集成一个功能完备的地图库 206
6.4.1 第1步 准备数据 207
6.4.2 第2步 建立Web页面和相关的库 207
6.4.3 第3步 绘制基本地图 208
6.4.4 第4步 为地图加上路线 210
6.4.5 第5步 添加动画控制器 212
6.4.6 第6步 准备添加动画 216
6.4.7 第7步 使路线具有动画效果 217
6.4.8 第8步 为每个站点加上标签 220
6.4.9 第9步 在标签上应用动画 223
6.4.10 第10步 将标签动画整合进整个动画的步骤之中 225
6.4.11 第11步 加上标题 228
6.5 小结 230
第7章 用D3.js自定义可视化数据视图 231
7.1 适应传统的图表类型 232
7.1.1 第1步 准备数据 233
7.1.2 第2步 建立Web页面 233
7.1.3 第3步 为可视化视图创建一个平台 234
7.1.4 第4步 控制图表的尺寸 235
7.1.5 第5步 画出图表框架 237
7.1.6 第6步 在图中加入数据 239
7.1.7 第7步 解答用户的问题 240
7.2 创建一个力导向网络图 241
7.2.1 第1步 准备数据 242
7.2.2 第2步 创建页面 244
7.2.3 第3步 创建展示平台 244
7.2.4 第4步 绘制节点 244
7.2.5 第5步 绘制连线 247
7.2.6 第6步 将元素定位 248
7.2.7 第7步 加入力导向 249
7.2.8 第8步 添加交互效果 252
7.2.9 第9步 一些其他方面的体验改进 255
7.3 创建可缩放的地图 256
7.3.1 第1步 准备数据 256
7.3.2 第2步 建立页面 257
7.3.3 第3步 创建地图投影 257
7.3.4 第4步 初始化SVG容器 258
7.3.5 第5步 取回地图数据 258
7.3.6 第6步 绘制地图 258
7.3.7 第7步 取回天气数据 259
7.3.8 第8步 在地图上体现数据 260
7.3.9 第9步 添加交互效果 261
7.4 创建一个特殊的可视化视图 263
7.4.1 第1步 准备数据 264
7.4.2 第2步 设置页面 264
7.4.3 第3步 为视图建立一个舞台 265
7.4.4 第4步 创建比例 265
7.4.5 第5步 取回数据 268
7.4.6 第6步 绘制视图 270
7.4.7 第7步 给视图上色 271
7.4.8 第8步 添加交互效果 275
7.5 小结 279
第8章 在浏览器中管理数据 280
8.1 使用函数式编程 281
8.1.1 第1步 先来个指令式编程风格版本 281
8.1.2 第2步 调试指令式风格代码 282
8.1.3 第3步 理解指令式编程可能带来的问题 283
8.1.4 第4步 使用函数式编程风格重写 283
8.1.5 第5步 评估性能 284
8.1.6 第6步 修复性能问题 284
8.2 使用数组 286
8.2.1 按位置提取元素 286
8.2.2 合并数组 288
8.2.3 去除无效数据 291
8.2.4 找到数组中的元素 292
8.2.5 生成数组 293
8.3 处理对象 293
8.3.1 处理属性名和属性值 294
8.3.2 清理对象子集 296
8.3.3 更新属性 297
8.4 处理集合 299
8.4.1 使用迭代工具函数 300
8.4.2 在集合中找到元素 302
8.4.3 检验集合 303
8.4.4 调整集合顺序 304
8.5 小结 305
第9章 创建数据驱动的网络应用：第1部分 306
9.1 框架与函数库 307
9.1.1 第1步 选择一个应用函数库 307
9.1.2 第2步 安装开发工具 308
9.1.3 第3步 建立新项目 309
9.1.4 第4步 加入我们的特殊依赖 311
9.2 模型与视图 313
9.2.1 第1步 定义应用的模型 314
9.2.2 第2步 实现模型 316
9.2.3 第3步 定义应用的集合 317
9.2.4 第4步 定义应用的主视图 319
9.2.5 第5步 定义主视图模板 323
9.2.6 第6步 改善主视图 326
9.3 可视化视图 329
9.3.1 第1步 定义额外视图 329
9.3.2 第2步 实现Details视图 329
9.3.3 第3步 实现Properties视图 330
9.3.4 第4步 实现Map视图 334
9.3.5 第5步 实现Charts视图 337
9.4 小结 338
第8章 创建数据驱动的网络应用：第2部分 340
10.1 连接Nike 服务 340
10.1.1 第1步 验证用户权限 341
10.1.2 第2步 接收Nike 返回数据 343
10.1.3 第3步 处理翻页 343
10.1.4 第4步 动态更新视图 348
10.1.5 第5步 过滤集合 349
10.1.6 第6步 解析返回值 350
10.1.7 第7步 获取详细数据 350
10.2 组装完整应用 354
10.2.1 第1步 创建Backbone.js 路由控制器（router） 354
10.2.2 第2步 支持不属于任何集合的Run模型 357
10.2.3 第3步 让用户改变视图 359
10.2.4 第4步 应用调优 364
10.3 小结 366
评论
还没有评论。