1.分析數據
想要把數據展示清楚，首先要了解要繪制的數據，包括元數據維度、元數據關系、數據尺度。這裏的元數據是指不能再細分到用圖形來表達的實體。
元數據的維度是數據每個屬性的度量。比如二維平面上壹個點的屬性就是它的維度是X軸和Y軸。壹般需要可視化的數據會有很多維度，通過分析每個維度及其關註度來清晰地表達數據是前提。過多的維度會增加可視化的難度，因為“我要講的故事太長了，大家卻在默默笑。”當然，如果壹直沈默，妳可能會失業，所以妳可以嘗試從二維變成三維，增加色彩、形狀等表現維度。如果真的感覺到了極限，就要考慮信息過載的問題，後期盡量刪除不必要的信息維度。
這個例子中的元數據是案例，維度是時間、類別、部門、前後案例。
元數據之間的關系，大部分和元數據本身的屬性有關，也就是數據之間的關系可以在壹個維度上判斷。
壹個案件的起止時間可以看出每個案件的來龍去脈。根據病例前後的病例，病例可以連接到壹個循環線上。
數據比例尺，往往需要收集真實數據，以確定圖形容量、坐標比例尺等。
好在例子中的數據量並不大，上圖是最復雜的過程。這個例子的可視化任務的主要困難是關系的表達。
2.匹配圖形
分析清楚數據後，要找壹個合適的盒子把這些“蘋果”放進去。最後壹步，妳或許可以憑借自己的邏輯能力，對收集到的現成數據進行分析，而這壹步需要妳自己的經驗和體會。數據可視化是壹門非常全面的知識！
喬說:它涉及到地圖學、平面設計、計算機視覺、數據采集、統計學、圖形技術、數模結合、動畫、三維渲染、用戶交互等多個領域。相關領域包括成像和視覺感知。空間分析、科學建模等。
不過好在現在有很多成熟的圖形可以借鑒。比如下面這兩個(本文中的例子是它們的綜合)。
流動數據
如何確定采用哪種圖形模式？這要從數據說起。確定哪個維度最重要，應該是第壹表現，這個維度往往決定了最終的圖形模式。當妳腦子裏對圖形有了壹個期待，如果妳覺得從空白開始太難了，可以去網上看看，或者回憶壹下妳用過的軟件有沒有類似這個概念的表達。
在時間、類別、部門、案前案後四個維度中，根據業務分析，案前案後最為重要，但巧合的是，在這項業務中，時間與案前案後密切相關——案前案後無縫銜接，案前案的結束時間就是案後案的開始時間。最後決定將時間和以往案例的組合作為第壹維度來考慮。確定了這個基調之後，我參考了壹些數字，如下圖。
Chrome開發者工具資源
後期效果渲染
最後，我做了壹個艱難的決定，選擇時間線圖形和兼容流動圖形！仔細的話會發現我抄襲了chrome的風格。
3.優化圖形
有了圖之後，試著把數據按照屬性畫進各個維度，不斷調整，直到合理為止。這裏說的雖然很簡單，但卻是最耗時耗力的階段。當維度過長時，就要琢磨信息架構是寬還是淺還是窄還是深，再加上交互導航，讓圖形更“看得見”。
在這個任務中，圖形被我修改了很多次。下圖顯示了修改前後的對比。
主要變化如下:
縱軸去掉壹個部門的標識(公訴、偵查監督、反貪等。)並用同樣的顏色含蓄地表達出來。這種考慮是了解檢察院業務的用戶看到案件的類別就能知道屬於哪個部門，部門缺失後單位區域更清晰——上下級單位的案件流轉很受關註。
之前的時間線以不等比顯示，其logo由下圖決定。總覺得這樣不夠嚴謹，後來看到壹個開源組件:Simile Timeline。針對時間軸上不同時間段的信息量差異很大的情況，定義了Hotzone的概念。我覺得很符合我的圖形，就采用了。這個Hotzone概念簡單來說就是放大壹個指定的時間段，這個時間段內的尺度可以更細，顯示更多的信息。