Introduction

近年來大數據盛行，無論是政府、企業甚至個人都開始回頭來檢視自己所擁有的資料，但是既有的資料眾多為了讓使用者快速的解讀資料的內容，視覺化就扮演相當重要的角色。網頁是一個最容易達到跨平台呈現且兼具互動功能的視覺化介面，相關的JavaScript類別庫相當的多，如D3.js、chart.js、highchart.js...等。 D3.js是 Data-Driven Document的縮寫，一種可將數據視覺化的JavaScript 類別庫，提供網頁將數據以圖像的方式呈現；實作雖較為複雜，但是彈性極大，足以客製化呈現所有客戶端的需求，本文將以實例的方式介紹D3.js的功能，包含Bar chart、Circle、Data Binding…相關的範例請上github下載( https://github.com/kunde520/D3Sample )。

Data

圖一是資料的截圖，本次文章使用到的資料是虛擬資料，內容主要是從2015年1月1日到2015年8月17日，不同標籤內容(Big Data、Hadoop、Cloudera、Hortonworks、MapR、BigInsights、Pivotal)於六都的正負向評價，欄位中P結尾代表正向、M結尾代表負向，共1603筆。



Use Bar Chart

Bar Chart是最常用的圖表格式，如圖二，第一筆資料為2015年1月1日Hadoop標籤於六都的正負向文章的數量，分別是76、8、71、98、11、10、49、74、97、55、98、26；單用數值無法立即理解彼此正負向文章的數量關係，最簡單的就是利用Bar Chart來呈現，圖三為使用D3.js繪製的結果。





要達成上述的圖形其實很簡單，原始碼分Html、Css Style以及JavaScript呈現如圖四、圖五以及圖六，其中Html原始碼當中必須引用jQery.js跟d3.js，而JavaScript為本次說明的重點，將在依Selector、Scale、Data Binding分述亦可參考github網站下載之範例一。







Selector

D3.js提供了兩種選擇元素的方式：select、selectAll。如同一般jQuery所提供的Selector，這兩種選擇元素的方式分別可以選取單一及多筆。如上圖六所示，本次文章就用到了兩種選擇方式，



以及



其中前者是幫助我們把Html中的選取後放置於變數chart中，供後續使用；但後者在Html的原始碼中應該是不存在，所以如果單獨使用會是一個空的集合。這邊我們可以先解釋JavaScript裡面的第一段



這裡選擇了Class是chart的元素，並且指定其高度與寬度的大小。

Scale

在本次的例子中，若將數值即視為該Bar Chart的像素高度，其畫面將如圖七所示。



在有限的範圍裏面(本文章用的是960*500)，根據不同的資料來源應該要能夠動態調整數值在畫面中的比例，使其呈現結果最佳，試想像如果當中有數值超過500，是不是畫面就不能呈現了。因此D3才會提供Scale的API，如表一。





從上方的原始碼中可以發現，本次使用的數值被裝在名為values的容器當中，而d3.scale就是本次的重點，我們產生了一個線性的比例尺y，並且指定range必須介於[0, height]也就是[0,500]，domain則是[0, d3.max(values)]也就是[0,98]，其中range所指的是輸出的範圍，也就是藉由比例尺y所產生出的結果必須介在0到500之間；而domain所指的是輸入的範圍，因為本次數列最大值只有到98，因此輸入必須介在0到98之間。
使用d3.max(values)是為了取出values中最大值，使這張圖表能根據數值的內容作彈性的變化，其他功能可參考D3所提供的Working with Arrays API-Reference，如表二，用法就如同一般副程式，將數值帶入即可得到對應的結果，如.attr("height", function (d) { return y(d); })中的y(d)。



Data Binding

接下來是D3的重頭戲，Data Binding的部分，D3雖然實作起來比較繁雜，但其彈性就可以相當的大；首先chart.selectAll("g")代表就是選擇所有標籤為g的元素，不過正常來說會找不到，因為一開始根本沒有這樣的內容，接下來就是利用.data(values)將資料傳入D3.js內，此時會回傳一個與資料大大小相同的Array，.enter()則是讓每筆資料在Array內以Object的方式存在，其值則為該Object的data屬性，如圖八所示。





接下來就是繪圖了，由於變數bar所指向的是產生在畫面上的12個繪圖元素，根據這12個元素我們分別要產生Bar Chart跟文字，如下方程式所示，唯一要說明的只有給予attr數值時的差別，這邊允許四種方式：直接給值、匿名程式(無參數、一個參數以及兩個參數)，若要將data傳入匿名程式當中就必須要採用一個參數的方式，也就是.attr("height", function (d) { return y(d); })。若同時需要data以及index則使用.attr("class", function (d, i) {if ((i % 2) == 1) return "odd";})，此時d代表data、i代表Index，這是限制。



Use Circle

使用Circle的面積來代表資料量的大小亦是常見的作法，呈現的結果如圖九。Html、Css以及JavaScript原始碼分別呈現於圖十、十一及十二，由圖例中可以發現，其實差距不大，只有將原本產生rect標籤改成circle而已，參考github網站下載之範例二。









Add Axis

在使用上述文章中，我們利用了Bar Chart 及Circle來呈現數值的狀態，不過如果該數值並沒有被呈現在畫面上，因此我們必須要改變一下呈現方式，加入X軸作為標籤說明、Y軸作為數值的對應，並且把原本的說明文字改成數值，呈現結果如圖十三。



參考github網站下載之範例三，為了加入X軸及Y軸，我們必須要利用到剛剛說明過的Scale，程式碼如圖十四。



Scale的部分就不多做說明了，Axis的部分使用到了d3內建的API，呼叫axis()產生一個新的axis產生器，允許調整innerTickSize、orient、outerTickSize、scale、tickFormat、tickPadding、tickSize、ticks以及tickValues，這個範例在x軸使用了orient將其調整於畫面的下方，而y軸則特別指定了ticks將間格分為十格。為了將x軸與y軸繪製於畫面上，必須使用在append物件後呼叫該axis產生器。

Use More Data

上述的範例都是將資料完全寫死在程式碼之中，但這樣的作法其實是完全沒有彈性的，當資料量一多就會是個災難，D3.js提供多種檔案的讀取API，如表三。



本次使用的範例是讀取csv檔，如下方程式碼所示，第一種是單純讀csv檔，第二種同時會將資料傳入匿名程式之中，第三種包含了錯誤的處理，允許使用這針對讀檔錯誤時做相對應的處理，第四種是加入了逐一訪問的函式，由於D3會將每筆資料裝在一個物件裡面，若要針對物件進行額外的處置，就必須要使用到這種方式。



由於資料筆數相當多，所以必須先做整理，我們預期先從資料當中取出2015年1月1日所有標籤正向及負向評價的數量進行呈現，結果如圖十五。



這邊除了用到上述讀取csv的api外，另外使用了客製化的物件來協助圖表的呈現，首先先利用Date將資料進行分組，關於linq.js的使用技巧這邊就不贅述，程式碼如下，藉由這樣的方式我們會得到一個Size為229的Array，我們取出日期為2015年1月1日的群組來使用。



每一筆資料的如圖十六所示，不過從property裡面會發現，多了negative及positive兩個原本不再資料欄位的內容，這是因為這邊針對該物件進行額外的處置，如下方程式碼所示，我們撰寫了一個副程式名字叫做type，在程式內針對所有既有property進行加總，將正向及負向的評價加總起來，剩下的就是針對資料進行繪圖了，這邊就不多做說明，可以參考github網站下載之範例四。





Use Transaction and Event

最後一個要介紹的東西是Transaction，由於上面的範例只使用到了一天的資料，如果希望能夠隨著使用者的選擇而變換不同的日期，才能使得這個圖表兼具互動性跟完整性；圖表隨著資料的變化如果少了中間的過場，就會變得相當奇怪。範例五希望透過滑鼠在日期文字上左右滑動後能夠切換不同的日期，因此必須要加上滑鼠移動的事件來完成這件事情，參考程式碼如圖十七，我們先新增了日期的文字並且在讀取檔案的副程式內，宣告了一個滑鼠位移的區間(名為box)，在該區間上方覆蓋了一個透明的長條圖，並且在長條圖上綁定mourseover的事件(名為enableInteraction)，其中內含的yearScale變數是為了要讓滑鼠左右移動的x軸座標轉換成固定範圍的數字，接著才能藉由displayDate將其轉換成日期。



接下來比較重要的是Transaction的部分，D3.js因為有資料綁定的技術，所以只需要更新資料就可以轉化圖表的樣貌，我們將更新資料的副程式放在dispalyDate裡面，當日期更新的時候，同時從原本的result當中取得正確的資料集，然後呼叫updateDate，這裡以更新y軸及正面評價說明，如圖十八。



首先必須先更新y軸Scale所能輸入的範圍跟資料集符合，也就是說y軸的刻度必須要跟著不同日期而變動，也就是下列的程式碼。



接下來就是選取正面評價的既有元素(class是bar的長條圖以及class是whiteText的文字)並且給予其新的dataset，原始碼如下。



在物件都選取及調整完畢之後，只需要在給予新的屬性之前加上transition()即可產生相對應的動畫，此時duration(100)代表轉場的時間長度為100毫秒，原始碼如下；值得注意的事情是，這邊不需要利用enter()，enter只有在必須要增加筆數的時候才需要使用。



不過還沒完，由於我們更新了新的圖樣，但並沒有把既有的圖形移除，因此還必須要使用到exit()，原始碼如下，詳細的狀況可以參考github網站下載之範例五。



Conclusion

D3.js比較屬於資料呈現範疇，可能無法拿來當作資料探索的工具，不過在展現資料圖形化上，他絕對是相當強大的工具，雖然在實作上比較複雜，不過也因此具備了相當大的彈性，同時D3.js亦可與地理圖資(如OpenStreetMap)結合。目前在實務上已經有相當多的案例使用了D3.js做為資料呈現的工具，包含政府的預算書、國家財富與健康的關係…等，相信藉由本篇文章的介紹，可以很容易修改範例達成自己想要的效果。

參考資料

Data-Driven Documents。
Data-Driven Documents Wiki。
The Wealth & Health of Nations。
D3.js - Getting Started。
資料視覺化。
Kunde’s GitHub。