《JavaScript數據可視化編程》是2020年3月人民郵電出版社出版的圖書，作者是[美]Stephen A·Thomas。
基本介紹
- 中文名：JavaScript數據可視化編程
- 作者：[美]Stephen A·Thomas
- 出版社：人民郵電出版社
- 出版時間：2020年3月
- 頁數：366 頁
- 定價：99 元
- 開本：小16開
- 裝幀：平裝
- ISBN：9787115444356
內容簡介,圖書目錄,
內容簡介
數據可視化是實現數據價值的重要工具。數據可視化可以將抽象的數字累積轉變成為圖形、表單等，讓普通人可以快速理解數據所代表的情況或趨勢。
本書是學習如何用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步 創建一個用來包含圖表的
元素 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
