內容簡介
《圖說D3:數據可視化利器從入門到進階》以一個故事開始,闡釋製作可視化數據圖表的基本方法論,以及如何結合D3 高效、快速地創建可視化圖表。
《圖說D3:數據可視化利器從入門到進階》首先解釋了可視化的基本涵義,以及D3 的適用人群,然後從一個具體的例子入手,告訴我們如何去挑選合適的數據集,以什麼樣的形式來展現數據,同時對SVG 進行了基礎鋪墊。在D3 部分,《圖說D3:數據可視化利器從入門到進階》介紹了D3的核心概念“選擇集”與“數據連線”,同時對數據連線的幾個經典場景進行了演繹,還結合D3 介紹了繪圖所要掌握的坐標系統、比例尺等基本概念。在數據載入方面,《圖說D3:數據可視化利器從入門到進階》講解了D3 可以解析的多種數據格式,以及從後端載入數據的多種方法,同時解釋了D3 動畫的製作方式,為製作互動式圖表奠定了基礎。最後,《圖說D3:數據可視化利器從入門到進階》揭示了掌握D3 的不二法門,並希望讀者能夠不斷實踐、持之以恆。
《圖說D3:數據可視化利器從入門到進階》寫作風格生動有趣、內容通俗易懂,既適合D3 初學者入門,也有助於有一定經驗的前端開發者快速掌握D3。
目錄
1 以圖敘事和 D3 1
1.1 可視化,已可視 1
1.2 圖表賦予數據一種形式,該形式闡述了數據的內涵 2
1.3 質量:內容為王 4
1.4 設計:形式至上 5
1.5 以圖敘事 6
1.6 開啟 D3 7
1.7 設計師為什麼喜歡 D3 8
1.8 程式設計師為什麼鐘愛 D3 8
1.9 什麼時候不該使用 D3 9
1.10 D3的使用要點 9
1.11所需工具 10
1.12小結 11
2 發掘並圖解案例 13
2.1 開始 13
2.2 世界正在變老嗎 14
2.3 發現並研究數據 15
2.4 打磨概念 18
2.5 選擇形式 19
2.5.1 用柱形圖展示數據 19
2.5.2 用堆積柱形圖展示數據 20
2.5.3 用線圖展示數據 22
2.5.4 用餅圖展示數據 23
2.5.5 用條形圖展示數據 25
2.5.6 用多個微型條形圖展示數據 26
2.5.7 選圖建議——思維導圖 28
2.6 本書將構建的例子 30
2.7 小結 31
3 可縮放矢量圖形 33
3.1 原理一瞥 33
3.2 到底什麼是 SVG 33
3.3 用 D3繪製圓形 34
3.4 在 Web Inspector中查看 SVG 36
3.5 通過 CSS改變 SVG元素的風格 37
3.6 其他圖形 39
3.6.1 矩形 39
3.6.2 圓角矩形 40
3.6.3 圓形 40
3.6.4 橢圓 41
3.6.5 多邊形 41
3.6.6 線 42
3.6.7 路徑 42
3.7 SVG文本 43
3.8 SVG樣式屬性 46
3.8.1 顏色和透明 46
3.8.2 筆觸屬性 47
3.9 繪圖順序和編組 49
3.10變形 51
3.11用 SVG構建條形圖 53
3.12小結 66
4 用 D3選擇集操控網頁 67
4.1 配置 D3 67
4.2 選擇元素 68
4.2.1 使用 CSS選擇器創建選擇集 71
4.2.2 從其他選擇集中新建選擇集 72
4.2.3 將選擇集賦值為變數 72
4.3 通過選擇集修改屬性 72
4.3.1 (attr)的工作原理 74
4.3.2 使用 (attr)套用樣式類和規則 76
4.4 聲明式的 D3 77
4.5 鏈式方法調用 77
4.5.1 在鏈式調用過程中新建選擇集 79
4.5.2 鏈式調用和變數賦值 80
4.6 添加元素 80
4.7 串在一起 82
4.8 用 (d3.selectAll)選中多個元素 84
4.9 使用選擇集製作條形圖 85
4.9.1 使用變數 96
4.9.2 數學運算 98
4.9.3 使用更好的變數 98
4.9.4 為數據使用變數 99
4.9.5 進行顯式約束 100
4.9.6 使用循環 101
4.10小結 107
5 數據連線:進入 109
5.1 什麼是數據連線 109
5.2 數據連線的核心概念:進入 110
5.3 進入並綁定數據 112
5.4 使用數據連線製作條形圖 115
5.5 使用匿名函式訪問綁定數據 120
5.6 完成圖形的剩餘部分 123
5.7 在對象中存儲數據 123
5.8 小結 129
6 縮放圖形並添加軸線 131
6.1 線性比例尺 131
6.2 靈巧地使用邊距規範 137
6.3 添加坐標軸 139
6.4 序數比例尺和坐標軸 147
6.5 小結 160
7 載入並過濾外部數據 161
7.1 使用人口分布數據構建圖形 161
7.2 D3兼容的數據格式 162
7.3 創建伺服器並上傳數據 163
7.3.1 通過命令行初始化伺服器 163
7.3.2 創建索引檔案 164
7.4 D3載入數據的方法 165
7.4.1 回調方法 165
7.4.2 D3如何解析 CSV表格 166
7.5 處理異步請求 169
7.5.1 用外部數據創建條形圖 170
7.5.2 最佳化條形圖 172
7.6 載入和處理大(超大)數據集 175
7.7 合併內容 178
7.8 小結 180
8 為圖形添加互動和動畫效果 181
8.1 數據連線:更新和退出 181
8.2 互動按鈕 185
8.2.1 用數據連線創建按鈕 186
8.2.2 讓按鈕更方便點擊 192
8.3 更新圖形 195
8.4 添加轉場動畫效果 199
8.5 使用鍵 200
8.6 小結 202
9 添加播放按鈕 203
9.1 在方法中封裝更新階段 203
9.2 在頁面上添加播放按鈕 207
9.3 點擊播放 209
9.4 允許用戶中斷播放 212
9.5 小結 217
10 修行靠自身 219
10.1本書是學習 D3的基礎 219
10.2如何克服障礙 220
10.3持續編碼 222
10.4小結 222
附錄 A JavaScript入門 223
A. JavaScript簡介 223
A.瀏覽器中的 JavaScript控制台 223
A.基本運算、變數及數據類型 224
A.在頁面和js檔案中編寫 JavaScript代碼 227
A.數組和對象 229
A.方法和函式 232
A. if語句和 for循環 233
A.調試 237
附錄 B 整理人口分布數據 241