之前進行過一個數據可視化的設計，初步有些成果，借此總結下自己設計時的步驟與方法。文中每步穿插當時設計的例子，希望可以更易理解，例子的原型圖如下。

設計中經過多次反復，但總體可以歸為以下3步。

1.分析數據
想要清楚地展現數據，就要先了解所要繪制的數據，包括元數據維度、元數據間關系、數據規模。元數據在這里指圖形要表達的不可再細分的實體。

元數據的維度即數據的各屬性度量，比如二維平面上的點的屬性是<x,y>,它的維度就是x坐標軸與y坐標軸。一般需要可視化的數據會有很多維度，分析清楚各維度及其關注度是最終把數據清晰表達的前提。過多的維度會加大可視化的難度，因為“想聊的故事太長了，反而就都沉默的笑著”。當然一直沉默就可能丟工作了，所以可以嘗試從二維到 三維、加入顏色、形狀等表現維度，如果真的覺得極限了，就應該考慮信息過載問題了，回頭試著刪減非必要的信息維度。

本例中的元數據是案件，維度有時間、類別、所在部門、前后案件。

元數據間關系，多數關系都與元數據本身的屬性有關，也就是說，可以在一個維度上判斷出數據間的關系。

案件的開始結束時間，可以知道各案件的前后關系。根據案件的前后案件，可以把案件連接在一條流轉線上。

數據規模，往往需要采集真實數據，以便確定圖形的容量、坐標刻度等。

幸好例子中的數據量不大，上圖是最復雜的流程了。本例的可視化任務主要難點在關系上的表達。

2.匹配圖形
分析清楚數據后，就要找個合適的箱子把這些“蘋果”裝進去。上一步，或許還可以靠自身的邏輯能力，采集到的現成數據分析得到，而這一步更多地需要自己的經驗、閱歷，數據可視化本來就是個很綜合的學問啊！

西喬如是說：它涉足制圖學、圖形繪制設計、計算機視覺、數據采集、統計學、圖解技術、數型結合以及動畫、立體渲染、用戶交互等。相關領域有影像學、視知覺。空間分析、科學建模等。

不過，幸運的是，現在已經有很多成熟的圖形可以借鑒了。比如以下兩個（本文的例子是它們兩個的綜合）。

Interactive History Timeline

Flowing Data

如何確定采用哪種圖形模式呢？這要從數據出發。確定哪個維度最重要，是應該首要表現的，這個維度往往決定最后采用的圖形模式。當你在腦中對圖形有個預期后，如果覺得從空白開始太難，可以上網看看，或回想自己使用過的軟件有無類似這種概念的表達。

在時間、類別、所在部門、前后案件4個維度中，根據業務分析得，前后案件是最重要的，但在這個業務中湊巧的是，時間與前后案件有很大關聯——前后案件是無縫相接的，前一案件的結束時間是后一案件的開始時間。最后決定將時間與前后案件聯合作為第一維度考慮。確定這個基調后，我參考了一些圖形，如下圖。

Chrome Developer Tools Resources

After Effect Render

最終我做了個艱難的決定，選用timelines圖形，同時兼容了flowing圖形！細心點還會發現，我山寨了chrome的樣式。

3.優化圖形
有了圖形后，嘗試把數據按屬性，繪制到各維度上，不斷調整直到合理。雖然這里說的很簡單，但這是最耗時耗力的階段。維度過多時，在信息架構上廣而淺或窄而深都是需要琢磨的，而后再加上交互導航，使圖形更“可視”。

在這個任務中，圖形經過我的很多次修改。下圖是一次修改前后的對比。

所做的修改主要有：

縱軸去掉一行一個部門（公訴、偵監、反貪等稱為部門）的標識，改用同一顏色隱式表達。如此的考慮是，了解檢察院業務的用戶看到案件類別就能知道它屬于哪個部門，而且少了部門后，單位區域更清楚——上下級單位的案件流轉是很受關注的。
之前的時間軸是非等比顯示的，它的標識由下方的圖形決定，始終覺得這樣不夠嚴謹，后來看到一個開源組件：Simile Timeline。它對一個時間軸上不同時間段上信息量相差懸殊的情況，定義了一個Hotzone的概念，覺得與我的圖形很契合，于是采用了。這個Hotzone概念，簡單說就是放大一個指定的時間段，這個時間段里的刻度可以更細，表現更多信息。
對數據可視化，只能說接觸了點皮毛，希望以此拋磚引玉。

原文：http://xoxpirit.com/2010/11/10/data-visualization-guide/