《JavaScript数据可视化编程》配套资源

编辑推荐

在工作中，我们经常需要展示一些数据。如何选择合适的数据可视化方式，以及如何在 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基础并想要从事相关工作的程序员学习参考。

作者简介

数据可视化是一个技术热点，而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
• 第10章　创建数据驱动的网络应用：第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