資料視覺化六步法

在當前網際網路，各種資料視覺化圖表層出不窮，本文嘗試對資料視覺化的方法進行歸納，整理成6步法,1將指標值圖形化；2將指標圖形化；3將指標關係圖形化；4將時間空間視覺化；5將資料進行概念轉換；6讓圖表動起來。

一般的資料圖表都可以拆分成最基本的兩類元素: 所描述的事物及這個事物的數值，我們暫且將其分別定義為指標和指標值。比如乙個性別分布中，男性佔比30%，女性佔比70%，那麼指標就是男性、女性，指標值對應為30%、70%。

乙個指標值就是乙個資料，將資料的大小以圖形的方式表現。比如用柱形圖的長度或高度表現資料大小，這也是最常用的視覺化形式。

傳統的柱形圖、餅圖有可能會帶來審美疲勞，可嘗試從圖形的視覺樣式上進行一些創新，常用的方法就是將圖形與指標的含義關聯起來。

比如google zeitgeist在展現top10的搜尋詞時，展示的就是「搜尋」形狀的柱形，圖形與指標的含義相吻合，同時也做了立體的視覺變化：

一般用與指標含義相近的icon來表現，使用場景也比較多，如下：

當存在多個指標時，挖掘指標之間的關係，並將其圖形化表達，可提公升圖表的視覺化深度。常見有以下兩種方式：

聯想自然或社會中有無場景與指標關係類似，然後借助此場景來表現。

根據這種關係聯想，發現宇宙星系中也有類似的關係：宇宙中有很多星系，我們最為熟悉的是太陽系，太陽系中又包括各個行星，因此整體借用宇宙星系的場景，將熟知的windows比喻成太陽系，將xp、window7等比喻成太陽系中的行星，將mac和其他系統比喻成其他星系，表現如下：

指標之間往往具有一些關聯特徵，如從簡單到複雜、從低階到高階、從前到後等等。如無法找到已存在的對應場景，也可構建場景。

支付寶新出的個人年度賬單中，在描述付款最多的三項時，構建了乙個領獎台的形式：

根據之前3步，可將指標、指標值和指標關係分別進行圖形化處理。

以最簡單的性別分布為例，可以得到乙個線性的視覺化過程，如下：

以上圖示為供參考的線性化過程，實際視覺化思考中，將哪類元素進行圖形化或者圖形化前後的順序可能均有不同，需根據具體情況處理。

通過時間的維度來檢視指標值的變化情況，一般通過增加時間軸的形式，也就是常見的趨勢圖。

當圖表存在地域資訊並且需要突出表現的時候，可用地圖將空間視覺化，地圖作為主背景呈現所有資訊點。

google zeitgeist在2010和2023年的年度熱門回顧中，都是以地圖為主要載體（同時也結合了時間），來呈現熱門事件：

先看下生活中的概念轉換，當我們需要喝水時，通常會說：給我來一杯水；而不會說：給我來30ml的水。在這裡，30ml是乙個實際資料，但是難以感知，所以用一杯的概念來轉換。

同樣在資料視覺化，有時需要對資料進行概念轉換，可加深使用者對資料的感知。常用方法有對比和比喻：

下圖是乙個介紹中國菸民數量的圖表：如果只看左半部分中國菸民的數量：32000000，知道資料量級很大，但具體有多大卻很難感知；直到看到右半部分：中國菸民數量超過了美國人口總和，這樣一對比，對資料的感知就加深了。

下圖是乙個介紹雅虎郵箱處理資料量的圖表，大意是每小時處理的電子郵件大小有1.2tb，相當於644245094張列印的紙。

這又是乙個很大的資料，但到底有多大？在這裡用了乙個比喻的手法：644245094張紙，如果把每一張紙首尾對接，可以繞地球4圈多。到這裡，能較深刻感受到雅虎郵箱處理的資料量之大，為地球節省了很多紙張。

更進一步地，還將這個比喻進行了圖形化表現。

資料圖形化完成後，可結合實際情況，將其變為動態化和可操控性的圖表，使用者在操控過程中能更好地感知資料的變化過程，提公升體驗。

實現動態化通常以下兩種方式：互動和動畫。

入場動畫：即在頁面載入後，給圖表乙個「生長」的過程，取代「資料載入中」這樣的提示文字。

互動動畫：使用者發生互動行為後，通過動畫形式給以及時反饋。

總結

資料視覺化形式多樣，思考過程也不盡相同。以上6步法，是基於「資料」層面（區別於資訊視覺化），梳理思考過程，總結設計方法，為後續視覺化提供可借鑑的思路。