摘要：本文以本人目前所做項目為基礎，從設計的角度探討數據可視化的設計的方法、過程和結果，起拋磚引玉之效。在技術方案上，我們采用通用web架構和d3js作為主要技術手段；考慮到項目需求，這里所做的可視化案例都是數據演示工具，不是數據探索工具。其中所用截圖，並非最終效果圖。
一． 基礎說明
- 1. 基礎技術
使用D3js繪制圖形
圖1，五彩斑斕的d3js
D3js是應用在web開發上的開源JS組件庫，是一個數據可視化工具。D3的全稱是Data-Driven Documents(數據驅動文檔)，在github上關注數量超過了2萬人，是非常受歡迎的開源工具。使用d3的有開發者，有設計師，有藝術家，資料非常豐富（雖然中文的很少）。D3其核心在於SVG可伸縮矢量圖形。從數學上講，如果說位圖是用矩陣描述數據元，那么SVG等矢量圖就是用方程式描述數據元。SVG有放大不失真的效果。關於SVG的更多介紹可以訪問http://www.w3school.com.cn/svg/svg_intro.asp
注意：
a) SVG技術不能兼容IE8及更低版本的IE瀏覽器。如果想要IE8使用d3，請用r2d3.js（一個結合了 Raphael.js的擴展庫）。但是考慮到即使如此，IE7依然無法兼容，不如放棄對二者的兼容性考慮。如果實在要兼容IE，要么用VML（微軟出品的繪圖工具，缺點是復雜），要么預渲染成位圖（需要放棄一些交互效果）。
b) SVG在瀏覽器端實現的方法是對每一個點和邊新建一個對象，雖然這樣做令我們操作它變得更容易（我們可以直接操作dom，代碼像jquery一樣簡潔），但是節點數量如果過多就會消耗太多的系統資源。例如論壇里一個朋友使用d3繪制超過12000個節點的圖，直接導致每個試圖打開它的瀏覽器都崩潰了。這個時候如果不願意做簡化那么應該試試canvas繪圖。
- 2. 制作流程
D3js只是一個可視化工具。就像學會了photoshop工具不等於能畫出好看的CG一樣，光會用D3js的API，依然不能保證可以設計出優秀的可視化作品。好在d3js已經提供了很多經典案例以供學習。初學D3js的最好方法還是以案例為切入點，通過修改開源的案例來快速實現想要的效果。如此積累到一定程度便可主動設計新案例。可以說跟從臨摹開始的美術學習完全一樣，設計制作可視化案例的基本流程是：
1) 分析需求——確認重點表現對象
2) 分析數據來源——確認數據維度和特征
3) 尋找參考案例——依照需求和數據來源尋找類似案例
4) 設計圖形——純設計角度制作PSD效果圖
5) 使用靜態數據制作源程序——生成靜態的網頁代碼
6) 數據預處理——對不同的數據格式和來源進行過濾
7) 使用動態數據測試和修改源程序——生成可用的程序
8) 迭代
http://sulab.org/2013/02/data-chart-plugin-beta/這篇來自SU lab的文章，描述了“基因組導航系統”數據可視化案例的制作過程，很好的反映了以上制作流程。
當然，在具體操作時，肯定要涉及數據格式變換、數據預處理等內容。我們通常約定數據格式為json，或者csv.但是本文只從設計的角度探討數據可視化的設計之道，起拋磚引玉之效，不討論數據獲取，數據預處理等細節。
3. 設計標准
從使用場景上來說，數據可視化分為兩類，一類是數據表現工具，用於把設計師所知道的數據用人們更易理解的方式表達出來；一類是數據探索工具，為了幫助未知事物的研究。考慮到項目需求，這里的案例都是數據表現工具。從技術角度上說，d3js也最適合做數據表現工具。
一個合格的可視化案例通常需要包含四個方面：informative(飽含信息的)，efficient(高效的)、Novel(新穎的)、Aesthetic(有美感的)。
以上四者中，informative最為重要，提供獲取信息的途徑是可視化成功與否的關鍵；Efficient次之，必須盡可能直截了當地獲取信息，同時不犧牲任何必要的復雜性；Aesthetic是以上二者的適當補充，而novel通常只是Effective information的副產品。
大量平庸的可視化設計完全基於標准格式，如bar chart（條形圖）、pie chart（餅圖）、line chart（線圖）、bubble chart（散點圖或氣泡圖）等。雖然這些圖提供了便捷方式並且具有自明性，但是其標准性和普遍性意味着無法達到新穎性。
故而在理想狀態下，應盡量采用新穎、高效的設計方案，突出結論及提高視覺魅力；即使采用標准圖形，也要有足夠的交互特性使之與眾不同。
4. 相關資源
找參考案例第一選擇是d3官網https://github.com/mbostock/d3/wiki/Gallery
除此以外還有http://techslides.com/over-1000-d3-js-examples-and-demos/ （有超過1000個例子）Github上的d3js源碼：https://github.com/zhangdiwaa/d3
二． 實際案例
案例一：區域報修熱點圖
1. 需求分析
系統中需要統計每個區域的報修次數，並以圖形化的方式顯示出來。地區又可以細分為樓宇和房間，每個部分可以分別統計個數也可以匯總出總數。其中重點在於，同層次下不同地區之間報修數量的對比。
2. 數據分析
需要表現的數據維度：2維，地區和報修數量。
a) 地區，特點是多層次，地區可以分為區域、樓宇、房間，呈樹形包含關系；底層節點的數量可能會比較多，不可預估。但觀察者注重的是上層節點，偶爾會關注底層節點。
b) 報修數量，特點是數字，根節點的值通過葉節點計算。
3. 尋找參考案例
對於這類數據可用的統計圖類型極多。常用的統計圖類型有堆棧圖、樹、矩陣、汽泡圖等，都可以表現這種2維數據。這里有個很好的范例，展示了同類型數據采用不同統計圖展示的效果：http://datavlab.org/datavjs/#stream，這里我們只學習設計思想。
4. 制作統計圖
在經過對比后，我個人認為Circle Packing或者bubble chart可以比較直觀地表現數值信息和不同區域之間的對比關系。並且Circle Packing還有一個優點，就是可以有效地屏蔽多余的數據，一開始只展示上層節點的關系，當用戶有需要的時候再點擊對應的圓圈展示下層節點——這是顯示多級層次數據的必要手段。現在做可視化離不開交互，故而這里我選擇一個帶有交互的案例作為參考模版。它可以很有效地表現出雙維度的層次、對比關系。
參考案例：http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
圖2，仿照Circle Packing案例我們制作的初始統計
5. 維度增加
原始的統計只有區域、報修數量兩個維度（雖然區域這個維度是多層次的）。為了增強功能，我們需要增加一個重要的維度——時間。如此整個可視化案例就可以反映時變特征，方便用戶追尋歷史信息。可以說在很多領域時變特征分析是數據分析和可視化方面表現的重點。
對於統計圖而言增加時間維度的最簡單方法是做時間軸。如果能做到隨着時間軸拖放的交互效果就更好了。不過一開始我們只做一個下拉列表來表示不同年份的時間統計，等這個功能做好后，再做時間軸。（類似的參考案例：http://budzet.aws.af.cm/）
圖3，開始先用下拉框調試，以后改成時間軸
更進一步，我們希望把報修類型維度也加入圖中。報修類型種類一般在10個以內。將這個維度加入圖形，如果反映出某個地區常出現的報修類型，那么對於管理員此類信息是非常有用的。
在表現上，為了避免信息過載，這一類附加信息我們通常使用tip、附加圖形的方式表示。例如圖4表現報修類型的餅圖和原圖結合的方式，這種多圖結合的方式對比效果表達得好，缺點是實現難度大，設計難度大，並且可能會給用戶造成誤解，故而必要時需要增加文字提示。圖5使用了tips與原圖結合的方式。Tips是最常用的增加維度的方法，但是和原圖耦合度不高，產生的對比效果較差，優點是容易實現，用戶理解障礙也小。
圖4，餅圖與原圖結合的方式呈現更多維度信息
原創效果
圖5：tips與原圖結合的方式呈現更多維度的信息
使用tips的參考案例有：
http://www.brightpointinc.com/interactive/budget/index.html?source=d3js
http://bl.ocks.org/Caged/6476579
6. 總結
至此，這個統計圖中已經包含了4個維度（地區、報修類型、時間、報修數量），一個層次關系（地區的包含關系），兩種直接的對比關系（區域之間報修數量的關系、 區域內報修類型之間的數量關系），一種間接的對比關系（不同區域的報修類型的數量關系）。可以說足夠強大了。為了向參考過的案例表達敬意，我稱其為zooming Circle Packing with tips and timeline統計圖。
我們可以總結：單維度上帶有層次關系並且總維度較少的統計數據 和 強調單維度的對比關系的需求，適合此zooming Circle Packing統計圖顯示。這種zooming Circle Packing圖，在展示強烈對比關系時非常有效，但是確實不適合太多維度的數據。如果要增加新的維度，那么我們往往只能采用上述的辦法，增加新的下拉列表、tips、時間軸等與原圖耦合度不高的部件來顯示。這種部件越多，用戶理解起來也會越困難。增加一個兩個倒還可以接受，如果維度過多，應該試試tree map等統計圖（不過那也更難理解了），或者拆開為多圖顯示。
案例二：維修組工作量對比圖
1. 需求分析：
項目中還有一個需求。就是統計每個月維修組工作量。一個維修組可能有多個人，每個組、每個人的工作量都要統計並量化的表示出來。維修組和組員的數量一般不會很多。需求重點：反映組之間的工作量對比，若能同時反映每個人的工作量對比則更好。
2. 數據分析：
數據維度：維修組、時間、工作量
a) 維修組：帶有2級層次，維修組——維修人員，二者呈樹形包含關系。維修組及其成員的數量都不是很多。
b) 時間：普通時間軸。從系統開始運行后計算。以月為最小單位。
c) 工作量：維修人員處理的工單數記為其工作量，維修組的工作量為組內成員的工作量之和
3. 尋找案例：
我們可以看出，這個數據集跟上一個區域熱點圖的數據集有很多相似之處，都有一個帶有層次關系的維度，都帶有時間軸，總維度數也不多，故而理論上也可以用zooming Circle Packing圖來實現。但是也有兩個顯著區別，其一是維修組的層次和數量不像區域那么多，其二，需求要求我們能同時展示工作組和人之間的對比。考慮到這兩點不同，和人們容易審美疲勞，不能用zooming Circle Packing圖，需要重新尋找案例。
尋找的對象顯然是類似zooming Circle Packing這樣可以顯示層級關系同時又能反應總和數據對比關系的統計圖和主題圖，例如tree，tree map，bar chart， stack chart，line chart等等。這里我找到兩個帶交互效果的案例：
http://mbostock.github.io/d3/talk/20111116/bar-hierarchy.html (帶有層次的柱狀圖)
http://bl.ocks.org/mbostock/3943967（可在堆棧和柱狀圖組之間變化的圖）
經過對比我選擇了后者，因為它堆棧和柱狀圖組都能在用戶不做操作的情況下反映底層之間的對比關系，適合表達滿足“同時反映每個人的工作量”的需求。故而我對其進行修改，做出了如下初始統計圖：
圖6維修組工作量對比圖的柱狀圖組效果
圖7維修組工作量對比圖的堆棧圖效果
4. 維度增加
從上面兩圖可以明顯地看到，組之間的工作量對比、甚至人員之間工作量的對比表達得很完美。再配合一些動畫效果已經足夠美觀。最后就是增加一個時間軸，來反映時間變量。
必須指出的是，對於這種2D圖形，時間軸是最后加上去的第三維，用戶在查看時間變化時並不像時間軸作為2D圖形的X軸和Y軸時那樣直觀。對此，有一些彌補手段，例如將上個月的統計圖做透明度減淡處理覆蓋在這個月的統計圖之上，或者用另開一個時間窗口用來描述，不過這些辦法效果都一般，所以也有用3D或者偽3D圖形去表現3個維度的數據的（例如http://charts.animateddata.co.uk/uktemperaturelines/）。但是考慮到需求上重點是突出組和數量這兩個關系，所以我這里就不做這些縫縫補補了。
最后為了明確描述信息，豐富內容，可以采用增加tips的方法，在用戶鼠標點擊（click）或者懸停(hover)的時候顯示tips，把維修人員姓名、月工作量、月總分、月平均分這些信息顯示出來。本質上還是用tips增加維度的方法。
5. 總結
事實上一開始這個圖的設計內容有很多，最初計划將時間、維修組、維修人員、工作量、維修人員的用戶評價總分、維修人員的用戶評價平均分這6個緯度的數據全表現在一個圖上，同時突出時變特征分析和人員之間的對比關系。但是這么復雜圖用純2D圖形是很難表現的，可以想象的結果是增加一堆選項按鈕，勉強將所有維度的數據綁定到一個圖中。或者一個大圖多個小圖來表現，這樣不僅做起來難，做好后用戶用起來也難。應該簡化內容，一幅圖里就表現主要需求，太多的內容不如分開，如此就有了第三個案例，維修人員時序評價圖。
案例三：維修人員時序評價圖
1. 需求分析：
既能按時間順序表現維修人員的評分變化，又能同時比較多個維修人員。
需求重點：時序變化，多人比較
2. 數據分析：
數據維度：維修人員，時間，平均分，總分
a) 維修人員：單一，無層次。
b) 時間：普通時間軸。從系統開始運行后計算。以月為最小單位。
c) 總分：維修人員 當月評價總分
d) 平均分：評價總分/當月接單數
3. 尋找案例：
這個案例無疑是最好找的，同時顯示多個變量的時序變化，line、bar是最為常用的表現方式。我們可以最快速度想到的類似案例無疑是股票走勢圖——多個股票的對比是多幾道變化的線。這種統計圖由於常見，有一種不言自明的效果。
這有一個非常好的案例：
法國人的命名變化：http://dataaddict.fr/prenoms/#amar,amaury,anae,andrew
這個案例的優點在於：大小自適應，漂亮的動畫效果，滑動時間軸，可由用戶選擇對比對象，好看的tips。
以這個案例為模版，各種表現時序對比關系的報表手到擒來。例如把人名換成維修人員，把人名出現的數量換成總分，就已經是很不錯的統計圖了。最后，平均分和總分是兩碼事，數值差距大，不適合在一個圖中表現，拆成兩個圖就好。
圖8，一個十分好的案例，法國人命名的變化
圖9，使用兩個圖表展示不同縱坐標數值的案例
http://www.cotrino.com/starpaths/
本來這一類時序對比關系的報表就比較成熟。再考慮到工時因素，不做多余的設計。
那么思路很明確了，維修人員時序評價圖，采用類似圖9的雙圖顯示方式，同時采用類似圖8的動畫效果。這樣已經滿足需求的需要了。