當前內容所在位置
- 第一部分 D3.js 基礎知識
- 第一章 D3.js 簡介
- 1.1 何為 D3.js？
- 1.2 D3 生態系統——入門須知
- 1.2.1 HTML 與 DOM
- 1.2.2 SVG - 可縮放矢量圖形
- 1.2.3 Canvas 與 WebGL
- 1.2.4 CSS
- 1.2.5 JavaScript
- 1.2.6 Node 與 JavaScript 框架
- 1.2.7 Observable 記事本
- 1.3 數據可視化最佳實踐 ?
1.3 數據可視化最佳實踐
數據可視化從未像今天這樣受大眾歡迎。內容詳實的地圖、精心設計的圖表、以及系統和數據集的復雜呈現形式不僅僅出現在工作場所，也在我們的娛樂和日常生活中頻頻露臉。隨著數據可視化的日漸普及，各種數據可視化工具庫也大量涌現；同時，聚焦提升可讀性和理解力的美學規則也在不斷豐富和完善。無論是普通大眾、專家學者還是決策人員，這些可視化的受眾群體已經日漸熟悉了曾一度被認為是極其抽象與復雜的數據趨勢呈現。這使得 D3 等工具庫不僅廣受數據科學家們的青睞，也贏得了記者、藝術家、學者、IT 專業人士甚至數據可視化愛好者們的一致好評。
如此豐富的選項似乎讓人應接不暇，而且修改數據集以在流圖、樹狀圖或直方圖中顯示相對容易，這往往會讓人認為信息可視化更注重風格而非內容。值得慶幸的是，對于不同的數據類型，應該使用哪些圖表和方法已經有了明確的規定。本書并不打算涵蓋數據可視化的所有最佳實踐，但我們會介紹其中的一些。雖然開發人員使用 D3 是為了徹底改變顏色和布局的使用，但大多數人還是希望創建支持實際問題的數據可視化表示。
在構建您的第一個可視化項目時，如果遇到疑問，記得化繁就簡——通常情況下，直方圖的展示效果往往比小提琴圖更好；直接展示分層網絡布局（如樹枝圖）也比力導向布局的效果更佳。視覺效果越復雜的數據呈現方式往往越能激發觀眾的興奮點，但稍有不慎也會導致其過分關注圖形的美學特質而非數據本身。打造炫酷而驚艷眾人的可視化效果本無可厚非；但也應時刻謹記：任何數據可視化作品的首要目標都是講好某個故事。詢問周圍的人們是否理解了你的可視化用意，以及他們是怎樣解讀的，這是至關重要的一步。需要給他們解釋嗎？他們能從與產品交互中得出什么結論？故事講完了嗎？
不過，要正確部署信息可視化項目，您應該有所取舍，要對數據和受眾有充分的了解。D3 賦予開發者極大的靈活性，但正所謂“能力越大，責任越大”。知道哪些圖表更適合表現哪些類型的數據固然是好事，但更重要的是要牢記，如果不從知情的角度精心設計，數據可視化很可能也會帶來誤導信息。如果要自行設計某款可視化圖表，那么充分了解數據可視化的最佳實踐則是構建過程中必不可少的一環。最好的學習方法就是查閱知名設計師和信息可視化從業者的優秀作品。雖然所有的相關著作都在探討這些話題，但其中有幾本書我們認為很有參考價值，可以幫助您掌握這些基礎知識。以下書目絕不是學習數據可視化的唯一教材，但可以作為很好的切入點：
- 《Better Data Visualizations》（Columbia University Press，2021 年），作者：Jonathan Schwabish（中譯本《更好的數據可視化指南》，電子工業出版社）
- 《The Functional Art》（New Riders，2013 年）《The Truthful Art》（New Riders，2016 年） 以及《How Charts Lie》（W.W. Norton，2020 年），作者：Alberto Cairo（第一本中譯本《不只是美：信息圖表設計原理與經典案例》，第三本中譯本《數據可視化陷阱》，作者：阿爾貝托·開羅）
- 《Data Visualisation A Handbook for Data Driven Design》（SAGE，2019 年），作者：Andy Kirk
- 《The Visual Display of Quantitative Information Envisioning Information》（Graphics Press，2001 年），作者：Edward Tufte
- 《Designing for Information》（Rockport，2013 年），作者：Isabel Meirelles
- 《Pattern Recognition》（已發表論文，2008 年，羅德島設計學院），作者：Christian Swinehart
- 《Visualization Analysis and Design》（A K Peters，2014 年），作者：Tamara Munzner
在閱讀數據可視化方面的文獻資料時，有一點需要牢記：這些文獻通常側重于靜態圖表。有了 D3，您就可以制作出交互式的動態可視化效果。設計一些交互不僅能使可視化作品可讀性更強，還能顯著提高其吸引力。即使只有幾個鼠標事件，那些感覺自己是在主動探索而非單純閱讀的用戶也可能會發現可視化的內容比閱讀靜態內容更引人注目、也更令人難忘。但增加這樣的復雜性需要對用戶體驗有所了解。本書將在第 7 章中予以詳細介紹。
第一章正文內容到這里就全部結束了！雖然還沒能用上 D3，但您現在也應該掌握了入門所需的全部基礎知識。如果仍不確定該在可視化項目中使用哪種 SVG 元素，或者對于 JavaScript 如何操作數據還不太熟悉，請繼續閱讀并回顧本章相關內容。從下一章開始，我們將著手創建 D3 可視化項目。
譯注
本篇 1.3 小節正文部分雖然到此結束，但隨后是一篇作者與可視化設計師及開發者做的人物專訪記錄，篇幅較長，故此單獨整理到下一篇，敬請期待。
另外，本小節作者提到的很多可視化經典著作很遺憾都沒有中譯本，有需要的讀者可以根據出版社信息及發行年份，參閱相應的英文原版。
