JavaScript数据可视化编程PDF|Epub|txt|kindle电子书版本网盘下载

JavaScript数据可视化编程PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 图像数据1

1.1 创建基础的柱状图2

1.1.1 第1步 引入所需的JavaScript代码2

1.1.2 第2步 创建一个用来包含图表的＜div＞元素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步 留出一个＜div＞元素来保存所有图表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 创建经典的sparkline90

3.1.1 第1步 加载需要请求的JavaScript库90

3.1.2 第2步 创建sparkline的HTML标签91

3.1.3 第3步 绘制sparkline92

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 map121

4.1.4 第4步 通过改变底色展示附加数据122

4.2 用热力图突出显示地区125

4.2.1 第1步 加载需要的JavaScript126

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-index130

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步 开始执行JavaScript155

5.2.3 第3步 运用语义化的html来创建时间轴156

5.2.4 第4步 添加内容说明159

5.2.5 第5步 选择性地借助jQuery161

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