前言

隨著資訊科技的進步，不管是網路購物、使用網路電話、瀏覽社群網站、觀看網路串流影音等等使用行為，所產生出的資訊流量也是不斷的增加，根據加拿大蒙特婁麥基爾大學心理學教授Daniel J. Levitin，同時也是行為神經科學、資訊科學專家所撰寫的書中指出，今天我們所面對的資訊量前所未見，我們每個人的人均生產資訊量，遠勝於人類過往歷史，越來越多與生活相關的資訊，像是可以在那購物、買些甚麼東西、或是現在我們正身處在何處等等。

而為了能夠在這些大量且零碎的訊息中得知其中奧秘，在現今有所謂大數據分析的技術，只要將這些零碎的大量資料丟進去分析加工之後就會產生許多具有關聯或意義的資料集，而如何將這些複雜的資料集其中含意清晰有效的傳達，則是接下來要討論的資料視覺化(Data Visualization)的功能。

何謂資料視覺化(Data Visualization)

資料視覺化簡單來說就是藉由圖形化的方式將大量、複雜、零碎的資料清楚明瞭的呈現出來，透過各種不同方式的視覺化，可以幫助專業人員快速的找出關鍵問題點，而圖像式清楚好理解的特性，則可以幫助各種領域彼此的溝通，並共同找出隱藏在資料背後的意義所在。

資料視覺化的相關應用

在目前資料視覺化的應用範圍，以開放資料的實際應用上更為有趣，舉例來說，最近滿常被討論的空氣污染議題，在”g0v零時政府”的開源專案之中就有這麼一個項目”環境儀表板(空污/雨量)”，其資料來源為行政院環境保護署的空氣品質即時汙染指標，如圖一所示，由圖中可看出其空氣污染的程度是用色彩來做區分，並且對部分地區做了一個簡易的時間統計圖表，藉由這種色彩的分布可快速的了解台灣各地的空氣品質，若需要較為詳細的資料，則可點擊部分地區，就會彈出較為詳盡的統計圖表，相對於原始資料(圖二)，將其視覺化之後，對於資料的傳遞與溝通則是更為有效。





另一個例子則是g0v零時政府中的”中央政府總預算”，如圖三所示，圖中看到是以氣泡來呈現各項的預算的花費，其花費多寡則是由氣泡的大小來表示，氣泡的顏色則是代表預算增加或減少的幅度，而氣泡的詳細資訊則是會顯示在左邊的欄項裏面，其中也有簡易的圖表來表示每年的預算金額。



像前面有提到，不同的視覺化方式，可以提供不同的觀點，好幫助決策者找到關鍵問題來下判斷，一樣是同個中央政府總預算的專案，若是換成了鳥瞰圖，如圖四所示，其將總預算以一個方形表示，底下的各項預算依部門填上各種相對應的顏色，其預算花費多少，則是以方塊的面積多寡來表示。從圖三中可以快速的瀏覽每年預算增減幅度較大的項目，而從圖四可以快速了解各部門的名目花費以及預算大小，因此，視覺化的方法與呈現樣式會影響觀看者由哪個角度切入，接收到甚麼樣式的訊息與資訊。



資料視覺化在JavaScript上的使用

在網站前端，資料室視覺化的函式庫在Javascript也越來越多樣，其中D3.js也是在近期內討論度較高，因此以下就以D3.js當作例子。

D3.js 是一個利用資料集來操作文件的 JavaScript 函式庫，可以讓你繪製出用 HTML、SVG 及 CSS 做出來的多元化動態資料圖形，其可在多數現今較先進的瀏覽器(modern browser)上執行，這表示只要你不是用 IE8 或更老舊的瀏覽器就沒問題，D3 也可以在 Node.js 上執行，使用 npm install d3 安裝，接著就可以用 require("d3") 載入模組，或是直接引用：



在講解範例之前，先來介紹D3.js的幾個基本概念：

一、選擇元素

在一般透過W3C DOM API來修改某些段落元素的文字顏色時，寫法如下：



而在D3.js裡，可以直接針對多個節點同時動作，因此可將上述例子的迴圈改寫成：



如果要針對單一節點做修改也可以這樣寫：



二、動態屬性

如果熟悉Jquery的話，再來看D3.js對於屬性上的操作應該是不太陌生，在D3.js中，可以將這些資料屬性寫成函數，例如要對段落的文字作隨機選色可以寫成：



D3.js可以藉由載入的數據資料來計算相對應的屬性值，資料在這邊是一個數值陣列，並且每個數值會被當作第一個參數(d)傳遞到選擇元素的函式中，範例如下：



三、節點的新增和移除

使用D3.js的enter 和 exit 功能，可以匯入資料建立新的節點，或是移除之後不必要的節點，例如：



四、過場動畫

D3.js的過場動畫著重在自然的呈現，因此其會隨著時間根據樣式或屬性作漸變，漸變的方式可以透過easing 函式做調整，像是如果想要將背景的顏色漸變為黑色，範例如下：



或是想要將所有圓形的圖案改變大小並且為每個圖案設定延遲觸發的例子如下：



有了以上的基礎觀念以後，我們來時做一個簡單的長條圖，範例如下，首先需要一個簡單的html頁面，並且定義一些長條圖的css樣式：



然後在Javascript中宣告一些範例資料：



再加上前面提到的基礎觀念：



然後存檔後再把網頁打開來就會看到結果如下:



這樣就完成了這個簡單的範例了，如果對D3.js還有很大的興趣或是想了解更多，請參閱官網https://d3js.org/，裡面有許多教學範例和討論內容，看過之後相信會受益良多。

結語

雖然在實作視覺化圖案時看起來很炫麗、有很多動畫，相對於枯燥的原始資料來說有更多的吸引力，但是其中還是有些多該注意的重點，例如像是資料是否是正確、要如何理解當下這些資料以及如何可以有效的傳遞隱含在資料中的訊息，所以要如何利用手上的資料講出一個豐富又明瞭的故事這就是另一門大學問了。

參考資料

1.抱歉，我正在跟重要事項爭奪你的大腦資源(端傳媒/Books 書摘)

2.資料視覺化(維基百科)

3.G0V零時政府網站

4.D3.js(Data-Driven Documents網站)

5.絕對別忽略的三個視覺化關鍵要素(資料視覺化網站)