編輯推薦
在工作中,我們經常需要展示一些數據。如何選擇閤適的數據可視化方式,以及如何在 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步 創建一個用來包含圖錶的元素 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
JavaScript數據可視化編程 epub pdf mobi txt 電子書 下載 2024
JavaScript數據可視化編程 下載 epub mobi pdf txt 電子書