數據可視化實戰：使用D3設計交互式圖表

數據可視化是展示數據的重要手段，廣泛適用於數據分析、計量統計、演講展示和各種網站應用。而通過瀏覽器來呈現數據不受平台限制，任何計算機只要能上網就可以看到漂亮的交互式圖表。《數據可視化實戰：使用D3設計交互式圖表》將帶領讀者學習當前最熱門的基於瀏覽器的數據可視化庫——D3。作者通過風趣幽默的語言、簡單易懂的示例，由淺入深地介紹了使用D3所需的基本技術，以及基於數據繪圖、比例尺、數軸、數據更新、過渡和動畫等構建交互式在線圖表的核心概念，最后還介紹了D3中常用的布局方法和創建地圖等流行應用的技巧。

《數據可視化實戰：使用D3設計交互式圖表》需要讀者具有一定的Web開發經驗，特別要了解一些DOM編程。除此之外，只要對數據可視化感興趣，均可閱讀學習。

Scott Murray 編碼藝術家，他的工作是編寫代碼來創建可視化的數據圖表及其他交互式作品，涉及交互設計、系統設計和生成藝術。Scott是舊金山大學助理教授，主要講授數據可視化和交互設計。他是Processing（processing.org）的貢獻者，也在培訓班上講創造性編碼。Scott擁有瓦薩學院的文學學士學位、馬薩諸塞州藝術與設計學院動態媒體研究所美術碩士學位。他的個人作品站點是alignedleft.com。

前言

第1章 寫在前面 1
1.1 數據為什麼要可視化 1
1.2 為什麼要寫代碼 2
1.3 為什麼要交互 2
1.4 為什麼要在Web上 3
1.5 這是一本什麼書 3
1.6 讀者是誰 4
1.7 這不是什麼書 4
1.8 使用示例代碼 5
1.9 謝謝你 6

第2章 D3簡介 7
2.1 D3能做什麼 7
2.2 D3不能做什麼 8
2.3 起源與背景 9
2.4 替代方案 10
2.4.1 簡易圖表 10
2.4.2 圖譜可視化 12
2.4.3 地圖映射 12
2.4.4 較原始的方案 13
2.4.5 三維圖形 13
2.4.6 基於D3的工具 14

第3章 技術基礎 15
3.1 Web（萬維網） 15
3.2 HTML 17
3.2.1 內容和結構 18
3.2.2 通過元素來添加結構 19
3.2.3 常用元素 20
3.2.4 屬性 22
3.2.5 類和ID 22
3.2.6 注釋 23
3.3 DOM 23
3.4 開發者工具 24
3.5 渲染與盒模型 26
3.6 CSS 28
3.6.1 選擇符 28
3.6.2 屬性和值 30
3.6.3 注釋 30
3.6.4 引用樣式 30
3.6.5 繼承、層疊和特指度 32
3.7 JavaScript 34
3.7.1 Hello，Console 34
3.7.2 變量 34
3.7.3 其他數據類型 35
3.7.3 數學運算符 39
3.7.4 比較運算符 39
3.7.5 控制結構 40
3.7.6 函數 42
3.7.7 注釋 43
3.7.8 引用腳本文件 43
3.7.9 JavaScript陷阱 44
3.8 SVG 48
3.8.1 SVG元素 48
3.8.2 簡單的圖形 49
3.8.3 為SVG元素添加樣式 51
3.8.4 分層與繪制順序 53
3.8.5 透明度 54
3.9 關於兼容性 56

第4章 安裝D3 59
4.1 下載D3 59
4.2 引用D3 60
4.3 配置Web服務器 61
4.3.1 基於Python的文本終端方案 61
4.3.2 MAMP、WAMP和LAMP 62
4.3.3 快開始吧 62

第5章 數據 63
5.1 生成頁面元素 63
5.1.1 連綴方法 65
5.1.2 各個擊破 66
5.1.3 平穩交接 66
5.1.4 不要連綴 67
5.2 綁定數據 67
5.2.1 怎麼綁定 67
5.2.2 數據 68
5.2.3 作出你的選擇 71
5.2.4 綁定及確定 72
5.3 使用自己的數據 75
5.3.1 自定義函數 75
5.3.2 數據需要擁抱 76
5.2.3 添加樣式 77

第6章 基於數據繪圖 79
6.1 繪制DIV 79
6.1.1 設定屬性 80
6.1.2 關於類 81
6.1.3 言歸正傳 81
6.1.4 設定樣式 82
6.2 data（）的魔力 83
6.3 繪制SVG 86
6.3.1 創建SVG 87
6.3.2 數據驅動的圖形 88
6.3.3 你好，色彩 90
6.4 繪制條形圖 90
6.4.1 老方法生成的條形圖 90
6.4.2 用新方法改進條形圖 91
6.4.3 上色 96
6.4.4 加標簽 98
6.5 繪制散點圖 100
6.5.1 數據 100
6.5.2 散點圖 101
6.5.3 散點大小 102
6.5.4 標簽 103
6.6 更上一層樓 105

第7章 比例尺 107
7.1 蘋果和像素 107
7.2 值域和范圍 108
7.3 歸一化 109
7.4 創建比例尺 109
7.5 縮放散點圖 110
7.5.1 d3.min（）和d3.max（） 110
7.5.2 設置動態縮放 112
7.5.3 整合縮放后的值 112
7.6 修飾圖表 113
7.7 其他方法 117
7.8 其他比例尺 117

第8章 數軸 119
8.1 數軸簡介 119
8.2 設定數軸 120
8.3 修整數軸 121
8.4 優化刻度 124
8.5 垂直數軸 125
8.6 最后的潤色 126
8.7 為刻度標簽定義樣式 128

第9章 更新、過渡和動畫 129
9.1 更新條形圖 129
9.1.1 序數比例尺 130
9.1.2 自動分檔 132
9.1.3 使用序數比例尺 132
9.1.4 其他更新 133
9.2 更新數據 133
9.2.1 通過事件監聽器實現交互 134
9.2.2 改變數據 135
9.2.3 更新視覺元素 135
9.3 過渡動畫 138
9.3.1 持續時間 139
9.3.2 緩動函數 140
9.3.3 延遲時間 141
9.3.4 使用隨機數據 143
9.3.5 更新比例尺 145
9.3.6 更新數軸 147
9.3.7 在過渡開始和結束時執行操作 149
9.4 其他數據更新方式 156
9.4.1 添加值（和元素） 156
9.4.2 刪除值（和元素） 161
9.4.3 通過鍵聯結數據 164
9.4.4 添加和刪除組合拳 169
9.4.5 簡要回顧 170

第10章 交互式圖表 171
10.1 綁定事件監聽器 171
10.2 什麼是行為 172
10.3 分組SVG元素 177
10.4 提示條 182
10.4.1 瀏覽器默認提示條 182
10.4.2 SVG元素提示條 184
10.4.3 HTML的div提示條 185
10.5 適應觸摸設備 188
10.6 更進一步 188

第11章 布局 189
11.1 餅圖布局 190
11.2 堆疊布局 194
11.3 力導向布局 197

第12章 地圖 203
12.1 JSON與GeoJSON 203
12.2 路徑 205
12.3 投影 206
12.4 等值區域 208
12.5 添加定位點 212
12.6 取得和解析地圖數據 215
12.6.1 查找shapefile文件 215
12.6.2 選擇解析度 216
12.6.3 簡化數據文件 217
12.6.4 轉換為GeoJSON 218

第13章 導出文件 221
13.1 導出位圖 221
13.2 導出PDF 222
13.3 導出SVG 223

附錄A 擴展閱讀 227
A.1 圖書 228
A.2 網站 228
A.3 Twitter 229