工作中，人们常常必须展现某些统计数据。怎样挑选适合的大数据可视化方法，及其怎样在 Web 应该 用和保持那样这种方法，它是人们常常会碰到的难题。根据阅读文章这书，你将学好怎么使用 JavaScript、 HTML、CSS 搭建好用而合理的大数据可视化计划方案。这书得出了很多具体的事例，根据逐层解读的方法，详 细叙述了数据可视化计划方案的建立、集成化、调节的整个过程，以协助用户快速把握像折线图、折线图、散点图等 基础的大数据可视化图型技术性。 在把握了基础图型的保持以后，这书还专家教授了给出这种高級的大数据可视化技术性： ● 建立树状图、热力图、网络图、文字云、时间线； ● 地图信息的数据可视化投射、建立波形图和复合型数据图表； ● 应用AJAX为图型加上互动个人行为； ● 在电脑浏览器中管理方法统计数据，及其建立统计数据驱动器的Web手机应用程序； ● 运用Flotr2、Flot、Chronoline.js、D3.js、Underscore.js、Backbone.js保持大数据可视化。 这书合适愿意学习培训 Web 上的大数据可视化技术性的用户，并可以协助她们迅速搭建简易而强劲的大数据可视化计划方案。大数据可视化是保持统计数据使用价值的关键专用工具。大数据可视化能够将抽象性的大数字积累变化变成图型、表格等，让平常人能够迅速了解统计数据所意味着的状况或发展趋势。 这书是学习培训怎样用JavaScript保持大数据可视化的1本实践活动手册。本书共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步 创建一个用来包含图表的
- 元素 3
- 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步 留出一个
- 元素来保存所有图表 65
- 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
