当前位置:主页 > 书籍配套资源 > JavaScript配套资源
《JavaScript数据可视化编程》配套资源

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

  • 更新:2021-11-04
  • 大小:2.45 MB
  • 类别:JavaScript
  • 作者:[美]、Stephen、A.Thomas
  • 出版:人民邮电出版社
  • 格式:PDF

  • 资源介绍
  • 相关推荐

编辑推荐

在工作中,我们经常需要展示一些数据。如何选择合适的数据可视化方式,以及如何在 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

资源下载

资源下载地址1:https://box.lenovo.com/l/DJhMU2

相关资源

网友留言