D3 4.x數(shù)據(jù)可視化實戰(zhàn)手冊 第2版
定 價:69 元
- 作者:[加] 朱啟(Nick Zhu)
- 出版時間:2019/1/1
- ISBN:9787115497871
- 出 版 社:人民郵電出版社
- 中圖法分類:TP31-62
- 頁碼:312
- 紙張:
- 版次:01
- 開本:16開
當(dāng)今,我們的世界已經(jīng)進入萬物互聯(lián)的時代,每天都會產(chǎn)生海量的數(shù)據(jù),如果直接面對這些數(shù)據(jù),可能讓人無從下手。相反,如果將數(shù)據(jù)可視化,用形象生動的形式展現(xiàn)出來,不僅有利于分析其中的關(guān)聯(lián),還能攫取可能存在的商業(yè)機會。本書旨在通過大量的示例和代碼,向讀者講述如何利用D3 4.x來實現(xiàn)數(shù)據(jù)可視化。只要讀者了解JavaScript,就能完全掌握本書的內(nèi)容。
本書共13章,從如何搭建D3.js的開發(fā)環(huán)境開始,逐步介紹D3中的各種操作,其中包括選集、數(shù)據(jù)的初步處理、數(shù)據(jù)映射、坐標(biāo)軸組件、動畫過渡效果、SVG相關(guān)介紹、繪制圖表、安排布局、可視化交互、力學(xué)模擬、制作地圖和測試驅(qū)動。為了幫助讀者理解這些豐富的概念,本書提供了大量的示例和代碼。最后,在附錄部分,為讀者介紹了另外兩個JavaScript庫,主要是關(guān)于三維制圖和多維圖表的。
如果讀者是一名熟悉HTML、CSS、JavaScript的開發(fā)人員或架構(gòu)師,并且希望了解D3的大部分知識,那么本書將非常合適。本書還可作為資深的D3數(shù)據(jù)可視化程序開發(fā)人員的快速參考指南。
D3js提供了一個強大易用的平臺,可以幫助我們創(chuàng)建優(yōu)美的可視化圖形,并通過HTML、SVG和CSS賦予數(shù)據(jù)鮮活的生命。該平臺是建立在Web標(biāo)準基礎(chǔ)之上的,因此可以充分利用Web瀏覽器提供的各種功能。閱讀和學(xué)習(xí)本書,讀者可以利用JavaScript的最新特性,通過D3 4.x實現(xiàn)最前沿的數(shù)據(jù)可視化。
本書首先介紹了基本的D3結(jié)構(gòu)和構(gòu)建塊,講解了如何編寫符合D3風(fēng)格的JavaScript代碼。接著闡釋了如何使用選集來定位頁面上的視覺元素,而后詳述了通過編程方式和視覺方式表示數(shù)據(jù)的各種技術(shù)。同時,本書還將教會讀者在可視化過程中使用尺度將數(shù)據(jù)域中的值映射至可視域,并使用D3支持的各種形狀函數(shù)來創(chuàng)建SVG形狀。
此外,讀者還可以在可視化過程中利用各種“力”——這是該領(lǐng)域中最激動人心的技術(shù)之一,并通過D3實現(xiàn)功能完善的等值區(qū)域圖。最后,讀者將學(xué)習(xí)如何在數(shù)據(jù)可視化項目中利用單元測試和測試驅(qū)動開發(fā)來生成高品質(zhì)的D3代碼。
本書的主要內(nèi)容:
深入了解D3基礎(chǔ)知識和慣用語法;
使用D3加載、處理數(shù)據(jù)并將其映射為網(wǎng)頁支持的各種圖形;
創(chuàng)建數(shù)據(jù)驅(qū)動的動態(tài)圖形,使其隨著數(shù)據(jù)的變化而動態(tài)更新;
利用D3提供的各種布局來創(chuàng)建精致、動態(tài)和交互式的圖表和圖形;
在可視化項目中創(chuàng)建數(shù)據(jù)驅(qū)動的過渡和動畫;
理解和利用更多高級概念,如力、觸摸和地理數(shù)據(jù)可視化。
朱啟(Nick Zhu)是一位專業(yè)的程序員和數(shù)據(jù)工程師,在軟件開發(fā)、大數(shù)據(jù)和機器學(xué)習(xí)領(lǐng)域擁有十幾年的實戰(zhàn)經(jīng)驗。目前,他擔(dān)任在線購物元搜索引擎Yroo的首席技術(shù)官,同時也是該網(wǎng)站的創(chuàng)始人之一。此外,他還是基于D3開發(fā)的、可用于制作多維圖表的流行開發(fā)庫dc.js的創(chuàng)始人。
第 1章 D3.js入門指南 1
1.1 簡介 1
1.2 搭建簡易的D3開發(fā)環(huán)境 2
1.2.1 準備工作 2
1.2.2 搭建環(huán)境 2
1.2.3 工作原理 3
1.2.4 更多內(nèi)容 4
1.3 搭建基于NPM的D3開發(fā)環(huán)境 5
1.3.1 準備工作 5
1.3.2 搭建環(huán)境 5
1.3.3 工作原理 6
1.3.4 更多內(nèi)容 7
1.4 理解D3風(fēng)格的函數(shù)式JavaScript編程 9
1.4.1 準備工作 9
1.4.2 開始編程 9
1.4.3 工作原理 11
1.4.4 更多內(nèi)容 15
第 2章 精挑細選 17
2.1 簡介 17
2.1.1 選集入門 17
2.1.2 CSS3選擇器入門 18
2.2 選取單個元素 19
2.2.1 準備工作 20
2.2.2 開始編程 20
2.2.3 工作原理 20
2.3 選取多個元素 22
2.3.1 準備工作 22
2.3.2 開始編程 22
2.3.3 工作原理 23
2.4 迭代選集中的元素 23
2.4.1 準備工作 24
2.4.2 開始編程 24
2.4.3 工作原理 24
2.5 使用子選擇器 26
2.5.1 準備工作 26
2.5.2 開始編程 26
2.5.3 工作原理 27
2.6 函數(shù)級聯(lián)調(diào)用 28
2.6.1 準備工作 29
2.6.2 開始編程 29
2.6.3 工作原理 30
2.7 處理原始選集 30
2.7.1 準備工作 31
2.7.2 開始編程 31
2.7.3 工作原理 32
第3章 與數(shù)據(jù)同行 34
3.1 簡介 34
3.2 將數(shù)組綁定為數(shù)據(jù) 38
3.2.1 準備工作 38
3.2.2 開始編程 39
3.2.3 工作原理 40
3.3 將對象字面量綁定為數(shù)據(jù) 43
3.3.1 準備工作 43
3.3.2 開始編程 43
3.3.3 工作原理 45
3.4 將函數(shù)綁定為數(shù)據(jù) 46
3.4.1 準備工作 47
3.4.2 開始編程 47
3.4.3 工作原理 48
3.5 數(shù)組的處理 50
3.5.1 準備工作 50
3.5.2 開始編程 50
3.5.3 工作原理 52
3.6 數(shù)據(jù)的過濾 53
3.6.1 準備工作 53
3.6.2 開始編程 54
3.6.3 工作原理 56
3.7 基于數(shù)據(jù)的圖形排序 56
3.7.1 準備工作 57
3.7.2 開始編程 57
3.7.3 工作原理 59
3.8 從服務(wù)器加載數(shù)據(jù) 59
3.8.1 準備工作 60
3.8.2 開始編程 60
3.8.3 工作原理 61
3.9 利用隊列異步加載數(shù)據(jù) 62
3.9.1 準備工作 63
3.9.2 開始編程 63
3.9.3 工作原理 64
第4章 張弛有“度” 66
4.1 簡介 66
4.2 使用連續(xù)尺度 68
4.2.1 準備工作 68
4.2.2 開始編程 68
4.2.3 工作原理 70
4.3 使用時間尺度 73
4.3.1 準備工作 73
4.3.2 開始編程 73
4.3.3 工作原理 74
4.3.4 更多內(nèi)容 75
4.3.5 參考閱讀 76
4.4 使用有序尺度 76
4.4.1 準備工作 77
4.4.2 開始編程 77
4.4.3 工作原理 79
4.5 字符串插值 80
4.5.1 插值器 80
4.5.2 準備工作 81
4.5.3 開始編程 81
4.5.4 工作原理 82
4.5.5 更多內(nèi)容 84
4.6 顏色插值 84
4.6.1 準備工作 84
4.6.2 開始編程 84
4.6.3 工作原理 86
4.6.4 參考閱讀 87
4.7 復(fù)合對象插值 87
4.7.1 準備工作 87
4.7.2 開始編程 87
4.7.3 工作原理 89
第5章 玩轉(zhuǎn)坐標(biāo)軸 91
5.1 簡介 91
5.2 坐標(biāo)軸基礎(chǔ) 91
5.2.1 準備工作 92
5.2.2 開始編程 92
5.2.3 工作原理 94
5.3 自定義刻度 97
5.3.1 準備工作 98
5.3.2 開始編程 98
5.3.3 工作原理 99
5.4 繪制表格線 99
5.4.1 準備工作 100
5.4.2 開始編程 100
5.4.3 工作原理 102
5.5 動態(tài)調(diào)節(jié)坐標(biāo)軸尺度 104
5.5.1 準備工作 104
5.5.2 開始編程 105
5.5.3 工作原理 107
第6章 優(yōu)雅變換 108
6.1 簡介 108
6.2 單元素動畫 109
6.2.1 準備工作 109
6.2.2 開始編程 110
6.2.3 工作原理 110
6.3 多元素動畫 111
6.3.1 準備工作 112
6.3.2 開始編程 112
6.3.3 工作原理 114
6.4 使用緩動函數(shù) 117
6.4.1 準備工作 117
6.4.2 開始編程 117
6.4.3 工作原理 119
6.5 使用中間幀計算 121
6.5.1 準備工作 121
6.5.2 開始編程 121
6.5.3 工作原理 122
6.5.4 更多內(nèi)容 124
6.6 使用級聯(lián)過渡 125
6.6.1 準備工作 125
6.6.2 開始編程 125
6.6.3 工作原理 126
6.7 使用選擇性過渡 127
6.7.1 準備工作 127
6.7.2 開始編程 127
6.7.3 工作原理 128
6.7.4 參考閱讀 129
6.8 監(jiān)聽過渡事件 129
6.8.1 準備工作 129
6.8.2 開始編程 129
6.8.3 工作原理 130
6.9 使用定時器 131
6.9.1 準備工作 131
6.9.2 開始編程 131
6.9.3 工作原理 133
6.9.4 參考閱讀 133
第7章 形狀之美 134
7.1 簡介 134
7.2 創(chuàng)建簡單形狀 136
7.2.1 準備工作 136
7.2.2 開始編程 136
7.2.3 工作原理 137
7.2.4 更多內(nèi)容 138
7.3 使用線條生成器 139
7.3.1 準備工作 139
7.3.2 開始編程 139
7.3.3 工作原理 141
7.3.4 參考閱讀 143
7.4 使用曲線 143
7.4.1 準備工作 143
7.4.2 開始編程 143
7.4.3 工作原理 146
7.4.4 參考閱讀 147
7.5 更改線條的張力 147
7.5.1 準備工作 147
7.5.2 開始編程 147
7.5.3 工作原理 150
7.6 使用區(qū)域生成器 150
7.6.1 準備工作 150
7.6.2 開始編程 150
7.6.3 工作原理 152
7.7 使用斷面曲線 154
7.7.1 準備工作 154
7.7.2 開始編程 154
7.7.3 工作原理 156
7.7.4 更多內(nèi)容 157
7.7.5 參考閱讀 157
7.8 使用圓弧生成器 157
7.8.1 準備工作 157
7.8.2 開始編程 157
7.8.3 工作原理 159
7.8.4 參考閱讀 160
7.9 實現(xiàn)圓弧過渡 161
7.9.1 準備工作 161
7.9.2 開始編程 161
7.9.3 工作原理 163
7.9.4 更多內(nèi)容 165
7.9.5 參考閱讀 165
第8章 圖表美化 166
8.1 簡介 166
8.2 創(chuàng)建線圖 168
8.2.1 準備工作 168
8.2.2 開始編程 169
8.2.3 工作原理 170
8.3 創(chuàng)建面積圖 175
8.3.1 準備工作 175
8.3.2 開始編程 176
8.3.3 工作原理 178
8.4 創(chuàng)建散點圖 179
8.4.1 準備工作 179
8.4.2 開始編程 179
8.4.3 工作原理 181
8.5 創(chuàng)建氣泡圖 183
8.5.1 準備工作 183
8.5.2 開始編程 183
8.5.3 工作原理 185
8.6 創(chuàng)建條形圖 186
8.6.1 準備工作 187
8.6.2 開始編程 187
8.6.3 工作原理 189
第9章 井然有序 191
9.1 簡介 191
9.2 創(chuàng)建餅圖 192
9.2.1 準備工作 192
9.2.2 開始編程 192
9.2.3 工作原理 195
9.2.4 更多內(nèi)容 197
9.2.5 參考閱讀 197
9.3 創(chuàng)建堆疊式面積圖 198
9.3.1 準備工作 198
9.3.2 開始編程 198
9.3.3 工作原理 200
9.3.4 更多內(nèi)容 202
9.3.5 參考閱讀 204
9.4 創(chuàng)建矩形式樹狀結(jié)構(gòu)圖 204
9.4.1 準備工作 205
9.4.2 開始編程 206
9.4.3 工作原理 207
9.4.4 參考閱讀 211
9.5 創(chuàng)建樹 211
9.5.1 準備工作 212
9.5.2 開始編程 212
9.5.3 工作原理 214
9.5.4 參考閱讀 220
9.6 創(chuàng)建封閉圖 220
9.6.1 準備工作 221
9.6.2 開始編程 221
9.6.3 工作原理 223
9.6.4 參考閱讀 225
第 10章 可視化交互 226
10.1 簡介 226
10.2 鼠標(biāo)交互 227
10.2.1 準備工作 227
10.2.2 開始編程 227
10.2.3 工作原理 229
10.2.4 更多內(nèi)容 230
10.2.5 參考閱讀 230
10.3 多點觸摸設(shè)備交互 230
10.3.1 準備工作 231
10.3.2 開始編程 231
10.3.3 工作原理 233
10.3.4 更多內(nèi)容 235
10.3.5 參考閱讀 236
10.4 縮放和平移行為的實現(xiàn) 236
10.4.1 準備工作 236
10.4.2 開始編程 236
10.4.3 工作原理 239
10.4.4 更多內(nèi)容 240
10.4.5 參考閱讀 240
10.5 拖曳行為的實現(xiàn) 241
10.5.1 準備工作 241
10.5.2 開始編程 241
10.5.3 工作原理 243
10.5.4 更多內(nèi)容 244
10.5.5 參考閱讀 244
第 11章 使用“原力” 245
11.1 簡介 245
11.2 使用引力和相互作用力 246
11.2.1 準備工作 246
11.2.2 開始編程 246
11.2.3 工作原理 249
11.2.4 參考閱讀 255
11.3 自定義速度 255
11.3.1 準備工作 255
11.3.2 開始編程 255
11.3.3 工作原理 257
11.3.4 參考閱讀 258
11.4 設(shè)置連接約束 259
11.4.1 準備工作 259
11.4.2 開始編程 259
11.4.3 工作原理 263
11.4.4 參考閱讀 268
11.5 借助力來輔助可視化 268
11.5.1 準備工作 268
11.5.2 開始編程 268
11.5.3 工作原理 271
11.5.4 參考閱讀 272
11.6 操作“力” 272
11.6.1 準備工作 273
11.6.2 開始編程 273
11.6.3 工作原理 276
11.6.4 參考閱讀 278
11.7 創(chuàng)建力導(dǎo)向圖 278
11.7.1 準備工作 278
11.7.2 開始編程 278
11.7.3 工作原理 280
11.7.4 參考閱讀 282
第 12章 地圖的奧秘 283
12.1 簡介 283
12.2 美國地圖的投影 283
12.2.1 GeoJSON 283
12.2.2 準備工作 285
12.2.3 開始編程 285
12.2.4 工作原理 287
12.2.5 參考閱讀 288
12.3 等值區(qū)域圖的構(gòu)建 288
12.3.1 準備工作 289
12.3.2 開始編程 289
12.3.3 工作原理 291
12.3.4 參考閱讀 291
第 13章 測試驅(qū)動 292
13.1 簡介 292
13.2 下載Jasmine并搭建測試環(huán)境 293
13.2.1 準備工作 293
13.2.2 開始編程 294
13.2.3 工作原理 295
13.2.4 參考閱讀 295
13.3 測試驅(qū)動—創(chuàng)建圖表 295
13.3.1 準備工作 296
13.3.2 開始編程 296
13.3.3 工作原理 297
13.4 測試驅(qū)動—SVG渲染 298
13.4.1 準備工作 298
13.4.2 開始編程 298
13.4.3 工作原理 299
13.5 測試驅(qū)動—精確渲染 300
13.5.1 準備工作 300
13.5.2 開始編程 300
13.5.3 工作原理 302
13.5.4 參考閱讀 303
附錄 分分鐘搞定交互式分析 304
簡介 304
Crossfilter.js庫 304
多維圖表庫—dc.js 308