基本上是這系列最後一篇,除非之後接觸到跟SVG相關的有趣應用! (≧▽≦)
我在大學畢業的最後一學期,選修了網頁資料視覺化的課程,課程主要使用D3.js這個JavaScript擴充函式庫做資料視覺化的工作。那D3.js是什麼? 跟SVG有什麼關係呢?
D3.js
D3指的是Data-Driven Document,以資料驅動編輯網頁的DOM,更白話的說法就是可以根據資料的筆數,動態地生成相同數量的網頁元素。
再舉個實際的例子:
建立data變數,並在裡面放入三個人分別喜歡的水果資料。然後利用D3.js內建的函數,將john喜歡的水果資料匯入,D3.js就能自動根據資料筆數在body建立三個div元素,而且還能在網頁上顯示出資料的文字內容。
1 | <script src="//unpkg.com/d3"></script> |
D3.js除了可以動態改變DOM,還可以在載入資料時,對資料進行一定程度的前處理,以111年臺中市第4屆市長選舉的候選人盧秀燕收到的政治獻金(incomes.csv)為例,我們可以先透過D3.js內建的方法把資料呈現在瀏覽器的console
,並觀察這些資料需要哪些前處理以及哪些資料需要被保留。
1 | d3.csv("盧秀燕市長選舉資料/incomes.csv").then(function(data){ |
從下圖可以看到總共有683筆的政治獻金資料,以及每筆政治獻金所有的欄位資料。
假設我們現在想要保留地址
、捐贈者/支出對象
、收入金額
、收支科目
和身分證/統一編號
,並把收入金額從字串轉換成數字,那要怎麼透過D3.js完成呢? 方法其實很簡單,我們只要用JavaScript定義一個方法,然後把原始資料傳入,最後再回傳要保留的資料欄位和已經轉換資料型態的資料就可以囉!
1 | //僅保留需要的資料欄位 |
下圖可以看到我們成功地保留需要的那幾個資料欄位並完成收入金額
資料型態的轉換囉!
以上只是對於D3.js粗淺的介紹和應用,實際使用過D3.js就會發現,它的語法實在和jQuery頗為類似,不過相比於jQuery的廣泛應用,D3.js則聚焦在資料視覺化上。(雖然部分人認為jQuery正在走向沒落,但目前還是有接近95%的網站有使用jQuery喔!)
(圖片出自: W3Techs)
所以到底D3.js跟SVG有什麼關係呢? 在網頁上建立圖形畫布主要有兩大選擇,其中一個是Canvas,另一個則是SVG。想當然爾D3.js產生資料視覺化的圖形都是建立在SVG畫布之下囉! 我們可以在HTML當中建立SVG畫布,然後使用D3.js的內建函數,去新增各種SVG元素並做出多樣的圖表,同時我們還能根據資料的變化,添加自訂的互動性動畫效果等等。
下圖就是透過D3.js配合SVG在網頁呈現的長條圖,原始碼因為太長就不放了。
最後來講講個人使用D3.js到現在的心得,以上面的長條圖為例,要能成功顯示x、y坐標軸,就必須仰賴不少內建函式來定義刻度的值域、寬度,而那一個個的長條(bar)也都必須自己透過函式定義位置和添加到畫布上。
簡而言之,使用D3.js產生圖表必須依靠眾多的內建函式,所以需要充分理解每個函式在做什麼,我基本上都是開著官方的說明文件邊看邊寫。但也因為圖表的每個細節都可以調整,所以D3.js是追求高度客製化圖表的一大利器。
如果不是追求高度客製化圖表的話,其實還有不少更簡單的JavaScript視覺化函式庫可以使用,像是C3.js或是Chart.js等等,相信整個學習曲線會相對D3.js平滑不少。