産品特色

編輯推薦

本書闡釋瞭製作可視化數據圖錶的基本方法論，以及如何結閤D3高效、快速地創建可視化圖錶。

內容簡介

本書以一個故事開始，闡釋製作可視化數據圖錶的基本方法論，以及如何結閤D3高效、快速地創建可視化圖錶。本書首先解釋瞭可視化的基本涵義，以及D3的適用人群，然後從一個具體的例子入手，告訴我們如何去挑選閤適的數據集，以什麼樣的形式來展現數據，同時對SVG進行瞭基礎鋪墊。在D3部分，本書介紹瞭D3的核心概念“選擇集”與“數據連接”，同時對數據連接的幾個經典場景進行瞭演繹，還結閤D3介紹瞭繪圖所要掌握的坐標係統、比例尺等基本概念。在數據加載方麵，本書講解瞭D3可以解析的多種數據格式，以及從後端加載數據的多種方法，同時解釋瞭D3動畫的製作方式，為製作交互式圖錶奠定瞭基礎。最後，本書揭示瞭掌握D3的不二法門，並希望讀者能夠不斷實踐、持之以恒。全書寫作風格生動有趣、內容通俗易懂，既適閤D3初學者入門，也有助於有一定經驗的前端開發者快速掌握D3。

作者簡介

史濤，每刻科技技術副總裁，資深前端開發者。曾任網新恒天用戶體驗部總監，稅友軟件首席前端架構師。國內首批接觸D3的開發者，對數據可視化有深刻的理解，曾將D3應用於多個大型項目的數據可視化。 裏奇?王是視覺周刊以及FiveThirtyEight.com的記者,專注於數據可視化和交互功能。

目錄

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．1 JavaScript簡介 223
A．2 瀏覽器中的JavaScript控製颱 223
A．3 基本運算、變量及數據類型 224
A．4 在頁麵和．js文件中編寫JavaScript代碼 227
A．5 數組和對象 229
A．6 方法和函數 232
A．7 if語句和for循環 233
A．8 調試 237
附錄B 整理人口分布數據 241

精彩書摘

推薦序

D3.js已一躍成為 JavaScript構建數據可視化的基礎工具。 D3由 Mike Bostock編寫，並在 Mike之前創建的 Protovis可視化庫中成功運用。與以往的 JavaScript可視化庫或 Protovis不一樣，D3被設計成一個麵嚮底層的工具集，既能直接用於構建可視化，也可以用來編寫抽象程度更高的可視化庫，如 Protovis。得益於該設計思想， D3可以為開發者在結構、樣式及交互行為上提供更多控製機製。當然，控製機製越強，學習麯綫也越陡峭。本書旨在幫助你消弭學習障礙，將 D3快速運用於實際工作中。本書作者 Ritchie King對數據可視化有自己獨特的見解。

我和 Ritchie是在 2011年紐約大學的高度選擇性學科《健康和環境》（SHERP）課程上認識的，那時他還是一名應屆畢業生，剛剛投入到數據可視化的研究之中，對這門學科抱以很高的熱情。數年之後，Ritchie畢業並在 Quartz從事記者工作，我再次遇到瞭他。他告訴我，他已將 D3與自己的工作結閤，以創建可視化報錶。我意識到，如果他能寫一本關於 D3的書，將非常新鮮、生動。這並不是一本由程序員撰寫的解釋某個類庫工作機製的書，而是一本闡釋數據可視化內涵的書——這正是其他 D3著作缺少的部分。Ritchie的工作也從 Quartz換到 FiveThirtyEight.com，繼續從事與數據驅動報錶相關的工作，並將其經驗悉數展現在這本書中。

本書非常適閤希望用 D3創建健壯的數據可視化圖形的初學者和有一定經驗的開發者閱讀。本書從選擇數據和可視化形式開始，到使用 D3構建 HTML元素 SVG，對諸多知識點進行瞭細緻的講解。在詳細闡述 D3之前介紹 SVG可以幫助讀者瞭解基礎知識，這對學習後麵的高級主題（如添加坐標軸和可視化交互）來說是極有價值的。Ritchie在工作中對數據可視化的專注配閤其寫作風格，使本書的可讀性變得非常強，而不是一本枯燥的 D3類庫基礎教程。本書絕對是初學者和專業人士學習數據可視化的不二選擇，我也非常樂意將本書收錄為叢書的一部分。

Paul Dix

叢書主編

前言/序言

前言

數據、數據、數據。有關數據的信息林林總總堆積起來，速度比以往任何時候都要快。數據信息的急劇膨脹帶來一個跨越兩個世紀的需求——數據可視化，即將原始數據中的模式和趨勢加工成視覺形式的藝術。

以往，這種視覺形式會通過紙張和油墨呈現在書籍、報紙和學術期刊上，固化於印刷的那個時刻。但是，現今數據卻越來越頻繁地被轉化成像素，並以可交互的形式呈現於綫上媒體，讀者點點鼠標就能改變其外觀。當今，每個數據從業者都需要一款工具協助其處理——從信息到網頁，從原始靜態的數字到動態圖形。

“D3”是“數據驅動文檔”（Data-Driven Documents）的簡稱，不僅可以幫助你將信息轉換成圖形，而且可以協助你基於數據創建和操作完整的網頁和圖錶。這是一款夢幻般的工具，正是或至少是這個世界亟需的一款數據可視化工具。

D3由斯坦福大學畢業生Mike Bostock聯閤其導師Jeffery Heer及Vadim Ogievetsky首發於2011年。D3是基於JavaScript這種互聯網世界絕對通用語言的一個自由擴展庫。D3背後的基本理論是：提供一種方式，將網頁上的元素與數據連接起來，然後基於這些數據去操縱網頁元素。例如，你想將5個數據點轉換成一幅條形圖，隻需在D3中將這些數據點與5個矩形圖形元素連接，然後根據對應的數據值設置矩形的寬度即可——真是簡單到極緻瞭。

寫作目的和讀者群

好吧，這樣說也不十分準確。D3不是那麼簡單的。它功能很強大，但學習起來也很有挑戰性。幸運的是，網上有很多D3教程和免費樣例，其中不少是Mike Bostock本人寫的。然而，雖然有這麼豐富而活躍的D3生態，但其入門仍然是需要費一番工夫的——特彆是對那些沒有JavaScript編程經驗的人來說。

我寫這本入門書的主要目的是想以無障礙而非麵麵俱到的方式全麵介紹D3的基礎知識要點。（假定你對HTML和CSS有一定的經驗。如果沒有，建議你抓緊時間學習這些基礎知識。）我希望這本書可以帶你輕鬆讀懂和領會其他代碼樣例——換句話說，就是非常輕鬆地走進D3的生態係統。

本書還有一個目的：闡釋製作優秀的數據可視化報錶的準則。互聯網上充斥著糟糕的圖錶和圖形。即使是數據可視化圖錶，也需要像其他技藝一樣，有一組最佳實踐和經驗積纍。從某種意義上說，每一幅可視化圖錶都在訴說一個故事，所以，如果你計劃製作一幅可視化圖錶，要好好想想你打算講述什麼內容，怎麼講述纔最容易打動人——這很關鍵！希望本書可以在這方麵給你一些啓示。

目錄架構

本書的內容組織非常直觀，隻是簡單地貫穿瞭一個使用D3製作動態、可交互圖形的完整流程，包括圖錶的初始概念，尋找閤適的數據，然後給齣一個強大的設計方案。隨著內容的推進，每個章節的復雜度會逐漸加深。以下是每章的內容概要。

第1章 以圖敘事和D3

對數據可視化進行瞭簡單的介紹，解釋可視化對提升理解有巨大作用的原因。同時，對D3進行瞭簡單的介紹，解釋為何D3會成為Web端數據可視化的利器。

第2章 發掘並圖解案例

敘述瞭如何去搜尋一組有故事性的數據，包括相關數據準備及可視化樣式製作指導，其中的示例“世界人口年齡分布柱形交互圖”貫穿本書。

第3章 可縮放矢量圖形

介紹瞭可縮放矢量圖形（SVG）。這是一種創建美觀圖形元素的Web標準，D3可以很輕易地操縱這些元素。本書部分示例是用SVG繪製的。

第4章 用D3選擇集操控網頁

開始接觸D3並學習用D3選擇頁麵元素是本章的主題。第3章中的SVG圖錶會在本章中用D3重建。

第5章 數據連接：進入

對D3的核心概念“數據連接”進行瞭詳細介紹。同時，用“數據連接”重建瞭第4章的示例。

第6章 縮放圖形並添加軸綫

介紹D3用來自動進行圖形縮放和生成坐標軸的方法，並在示例中進行瞭應用。

第7章 加載並過濾外部數據

從外部獨立數據源創建圖錶可能是D3的主要實際使用場景。本章介紹瞭如何加載外部數據，以及D3采用異步方式加載數據的原因。

第8章 為圖形添加交互和動畫效果

給示例添加交互按鈕（數據集中每一年對應一個按鈕）。當按鈕被點擊時，柱形圖中的每一個柱形會按照實際的數據值進行水平縮放，並産生過渡動效。

第9章 添加播放按鈕

播放按鈕一旦被點擊，就會在數據集中輪播每一年的數據。

第10章 修行靠自身

本書最後以教你如何正確進入D3生態係統結尾。

附錄A JavaScript入門

為初學者提供與JavaScript基本概念相關的指導。

附錄B 整理人口分布數據

手把手教你如何下載、整理本書示例中的數據。

約定

代碼列錶、內聯代碼和方法名稱將使用等寬字體，如this。

結束語

寫作本書時，我還隻是一個D3的初學者。我這麼說的原因有兩個：一個原因是，以前睏擾我的這些D3知識點在我腦海裏仍然很清晰，我可以盡我所能在本書中錶達清楚，我希望我做到這一點瞭；另外一個原因是，既然我能辦到，那麼我相信你也可以。

緻謝

首先，我需要感謝我的妻子Emily Elert，在無數個周末為我精心製作午餐，料理傢務，這樣我纔能專心寫作。本書應當獻給她，但這還遠遠不夠。她是我最需要感謝的人。我其實並沒有意識到，當我全身心投入寫作時，我們悠閑的小日子沒時間過瞭，但她似乎早有心理準備，對我耐心又體貼，從未將她的壓力宣泄給我，並依然答應嫁給我，給瞭我最大的驚喜。

此外，我還要真心感謝叢書編輯Paul Dix。本書，至少我的寫作經曆，在一次與他輕鬆友好的談話後確定下來。Paul既是我好友的未婚夫，也是我研究生院的校友。某天晚上，我們喝酒聊天，暢談編程。我說我已經沉浸在D3中不可自拔。他打斷我並問道：“你是一個記者？”“是的。”我迴答。Paul沉默瞭一會兒，然後神秘地問道：“你想寫一本關於D3的書嗎？”Paul，謝謝你給瞭我這次機會。

當然，我還要感謝我的編輯Debra Williams Cauley，她充分展示瞭把握節奏的能力，刺激我不斷嚮前，否則我這些寫書的時間會浪費在各種慈善壽司午宴上。在本書的整個寫作過程中，她還幫助我對校審的具體反饋進行分類。

說到校審，真的很有必要感謝他們。Kevin Quealy、Robert Mauriello及Josh Peek對本書的原稿提供瞭反饋。Robert對計算機領域的相關概念進行把關，確保本書不失專業性。Alli Treman和Sasha Mendez非常細緻，不放過任何一行代碼，抓齣瞭不少低級錯誤。特彆是Lynn Cherny，給瞭我很多有深度的建議，這無疑將本書的品質提升瞭一個檔次。

還要特彆感謝Chris Zahn，容忍我在從原稿到最終發布的過程中不斷犯錯。原稿中有些章節的格式慘不忍睹，他都能幫忙整理清楚，態度還非常友善。

迴顧本書的整個齣版過程，不得不多提一下Kevin Quealy和Amanda Cox。他們不僅讓我對數據可視化産生瞭濃厚的興趣（他們關於數據新聞學的教學是如此讓人驚艷，我在紐約大學受教瞭），也對我的職業發展一路提攜。我欠他們太多。他們真的是無與倫比。

我還想感謝David Yanofsky，他是我在Quartz工作時“二人圖形組”中的另一個。他教給我很多關於D3和JavaScript的知識，並幫助我製作瞭自己的第一個交互式圖錶。他還是一個無可救藥的段子手，我很尊敬他。謝謝你，兄弟。

最後，但絕不僅限於此，我還要感謝Mike Bostock編寫瞭一個如此美妙的JavaScript庫，用於製作基於Web的數據可視化。他還不斷製作優雅、美觀的樣例，以幫助我們汲取D3的全部能量。謝謝你，牛人！

可視化的編程入門書，d3的講解深入淺齣。

還不錯

不錯挺快永遠那麼棒

學習d3數據可視化 真心覺得不錯

可視化分析越來越重要，多學習，不會有錯的

very good

不錯的一本書，值得推薦一讀。

可視化分析越來越重要，多學習，不會有錯的

真的不錯啊啊