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

推薦序

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的全部能量。謝謝你，牛人！