指引入門d3.js的門徑,如何基于基本原則創(chuàng)建可視化？

編者按：Google數(shù)據(jù)可視化工程師Ian Johnson指引了入門d3.js的門徑。

d3是一個(gè)豐富、廣闊，有時(shí)危險(xiǎn)的學(xué)習(xí)領(lǐng)域。d3的API文檔上長長的函數(shù)列表也許嚇壞了你，d3主頁上列出的幾十篇教程也許讓你難以選擇。有超過兩萬個(gè)d3示例可供學(xué)習(xí)，但你永遠(yuǎn)不知道給定的示例是否容易理解。

如果你需要的只是快速實(shí)現(xiàn)柱狀圖或線圖，也許這篇文章不適合你，有大量制作圖表的庫可用。如果你更喜歡看書，那么Scott Murray的Interactive Data Visualization for the Web是一個(gè)很好的起點(diǎn)，而Elijah Meeks的D3.js in Action比較全面地深入了部分API.

我希望這篇指南能幫助你在心智上做好理解d3的準(zhǔn)備，并指出一些值得探索的方向。除了d3.js的API外，還有很多需要學(xué)習(xí)，既包括web標(biāo)準(zhǔn)方面的技術(shù)知識(shí)，例如HTML、SVG、CSS、JavaScript，也包括溝通概念和數(shù)據(jù)可視化原則。你大概已經(jīng)對此有所了解，所以這篇指南試圖為你提供一個(gè)良好的起點(diǎn)，幫助你學(xué)習(xí)更多你想要深入的內(nèi)容。

溝通復(fù)雜概念

圖片來源：r2d3

在我們深入數(shù)據(jù)可視化原則和技術(shù)之前，先讓我們花點(diǎn)時(shí)間樹立下雄心壯志。有許多驚人的例子展現(xiàn)了d3的可能性，包括紐約時(shí)報(bào)文章、r2d3、distill.pub、datasketch|es、polygrah、ncase。如果我這里遺漏了什么，請留言告知。

不過不要僅僅艷羨別人，你需要樹立自己的雄心壯志，這是最重要的事情之一。我從一些使用d3.js的頂尖數(shù)據(jù)可視化從業(yè)者的訪談那里學(xué)到的是，最佳學(xué)習(xí)方法之一是預(yù)想你真心想要?jiǎng)?chuàng)建的東西，然后弄清楚創(chuàng)建它你需要做什么。

可視化表示

D3并沒有引入新的可視化表示。不同于Processing、Rapha?l、Protovis，D3的圖形記號詞匯直接來自于web標(biāo)準(zhǔn)：HTML、SVG、CSS。

-- http://d3js.org

圖表不過是內(nèi)有形狀的矩形。d3提供了方法，通過操作圖形記號或創(chuàng)建自己的形狀來定義你自己的可視化表示。d3使加入視覺交互和聲明可視化行為變得容易。你將在這里學(xué)習(xí)表達(dá)不可能使用其他媒介表達(dá)的東西。

如果你想要了解這些不同類型的記號背后的原則，還有人們使用的不同種類的圖形表示，不要錯(cuò)過Grammar of Graphics一書。

不過不用擔(dān)心，僅僅基于圓圈、矩形和仔細(xì)的布局，你就可以創(chuàng)建海量有創(chuàng)意的東西。從簡單的東西開始，總是嘗試讓屏幕顯示點(diǎn)什么，然后基于這個(gè)原型開始正式創(chuàng)建過程。

基于web

圖片來源：visualcinnamon.com

使用d3.js的原因之一是你可以立刻和任何使用web瀏覽器的人（地球上至少一半人?。┓窒碜髌?。這意味著在開始調(diào)用d3 API函數(shù)前，你需要了解SVG、HTML、CSS基礎(chǔ)。如果你想渲染大量數(shù)據(jù)，那么你大概也會(huì)想要學(xué)一點(diǎn)Canvas（別擔(dān)心，某種程度上說，它實(shí)際上比SVG要好學(xué)）。掌握了d3和Canvas的基礎(chǔ)后，我推薦lars verspohl寫的D3 and Canvas in 3 steps這篇出色的中級教程。

至于SVG，我推薦你從Scott Murray的SVG primer開始，這篇簡短易讀的教程介紹了SVG的初步知識(shí)。建議你親自動(dòng)手試驗(yàn)，手工創(chuàng)建SVG元素，看看它們是如何工作的。你可以使用BlockBuilder這樣的工具快速上手，無需配置任何開發(fā)環(huán)境。另外，你可能需要參考MDN上的SVG文檔。掌握了基礎(chǔ)之后，推薦閱讀Nadieh Bremer的SVG beyond mere shapes。

blockbuilder.org

你不用直接使用SVG制作可視化，使用d3操作

• 函數(shù)
  函數(shù)

  +關(guān)注

  關(guān)注

  3

  文章

  4331

  瀏覽量

  62618
• 可視化
  可視化

  +關(guān)注

  關(guān)注

  1

  文章

  1194

  瀏覽量

  20942