快速上手 D3.js 資料視覺化

資料視覺化一直都是很熱門的技能,儘管現在有各種工具製作資料視覺化,但 D3.js 至今還是最知名也最多人使用的工具,而其實入門網頁的資料視覺化非常簡單,學習門檻並不高,我相信任何人都有辦法快速學會,我的經驗是有程式基礎背景的人,只要幾天內就可以做出一個視覺化作品的雛形了。

你不需要先學會 D3.js,才可以製作資料視覺化。

這句話是我覺得非常重要的一句話,因為這幾年我們帶領了很多沒有任何網頁經驗的人製作資料視覺化,而且他們幾乎都不是先去學 D3.js 才製作資料視覺化,反而是做資料視覺化的過程中,漸漸地搞懂了 D3.js,也就是 Learning by Doing

我相信學習最重要的是先讓人有成就感,因為得到初次勝利的感覺,自然而然地就會讓人想繼續努力學習更多東西

所以要怎麼學 D3.js 資料視覺化呢?

因為篇幅的關係,這裡還是假設是有基礎程式經驗的人入門 D3.js 資料視覺化。
如果尚未以任何基礎的人,可以先 Google 快速了解 HTML、CSS、JS 是什麼,只要大概的基礎就可以了。但原則上,若沒有任何程式基礎,身旁有一個可以問的人會比較好。

你可以依據以下的流程:

  1. 從政府的 Open Data 網站中找一個自己有興趣覺得可以做的主題。
  2. 想一想你想要用什麼圖表呈現。
  3. Google 搜尋 D3.js 的範例圖,找範例程式碼。
  4. 複製程式碼到自己的編輯器成 HTML 檔,啟動測試 Server(python -m SimpleHTTPServer),開啟瀏覽器,看看是否可以呈現出來一樣的圖表。
  5. 改成你的版本。
  6. 分享給朋友看,然後不斷改進它。
  7. 公開發布。

舉例來說:

你透過了政府資料開放平臺,發現對空氣品質即時污染指標這份資料有興趣,你就可以點資料來源下載 CSV 格式的檔案,看看有什麼欄位。

接著也許你想要將它呈現成長條圖(一開始盡量先挑簡單一點的圖表),你就可以 Google “d3 bar chart” ,然後一般就可以找到像這樣的網站,上面有圖表的呈現,下面則是程式碼範例。

如果你覺得這個圖表 OK,你就可以用自己的編輯器開一份新的 HTML 檔案,直接複製程式碼,並複製所需資料到自己的本地端,啟動測試 Server,打開瀏覽器到對應的網址看看可不可以呈現。

接下來,因為希望把這個範例,依照你的資料,呈現出你的資料視覺化,所以從邏輯上來說,我們需要先更改資料來源,接著更改程式碼中對應要呈現的資料欄位。

也就是說,我們先搜尋程式碼中有出現資料檔案路徑的部分,把這些路徑改成剛剛下載下來空氣品質即時污染指標資料路徑,同時把對應前面的 d3.tsv 改成 d3.csv。

再來,你可以先看看原本的程式碼範例中的資料集(data.tsv),有哪些欄位,是對應到圖表的 X 軸、Y軸還是什麼,就把在程式碼中的該欄位,換成你想呈現的欄位。

例如我們發現找到的資料集中,欄位 letter 對應到 X 軸,欄位 frequency 對應到 Y 軸,那回到我們的空氣品質資料集,X 軸可能會想呈現 SiteName,Y 則是 PSI,所以就把程式碼中 letter 改成 SiteName,出現 frequency 的地方改成 PSI。

這樣一來,就你的資料視覺化應該就有雛型了,接下來你就可以分享給朋友看,或是自己調調參數,看看有什麼效果。

最後就可以放到 Github / Gist 上,公開給大家看了!

而最後,你就可以再回過頭來,了解 D3.js 。

*如果想完整的入門 D3.js,可以參考這本書: Interactive Data Visualization for the Web

*如果先快速地概略了解 D3.js,可以參考這個網頁

Like what you read? Give Chi-Hsuan Huang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.