前端之圖形學-1 資料視覺化

什麼是資料視覺化？

資料視覺化，是關於資料視覺表現形式的科學技術研究。以某種概要形式抽取出來的資訊，包括相應資訊單位的各種屬性和變數，利用圖形、影象處理、計算機視覺以及使用者介面，通過表達、建模以及立體、表面、屬性以及動畫的顯示，對資料加以視覺化解釋。

文章主要記錄資料視覺化在前端的要點，並不關注前期資料的採集清洗等工作。

圖為美國各洲“選舉人票”的佔比情況。作者設計了兩種表現方法，一是以“選舉人票”的分佈做為底圖，一是直接以美國地圖作為底圖。除此圖上方雙方選舉人票總體數量對比外，滑鼠移至各洲上方還能顯示各洲“選舉人票”數量及對希拉蕊與川普的支援比例。  

為什麼進行資料視覺化

資料視覺化的主要目的在於，將其資料進行視覺化的能力，對資訊的傳播和交流要清晰且有效。因此資料視覺化需要有效表達觀點，不僅形式上要符合審美，而且功能上要符合需求，深入對資訊稀疏且複雜的資料庫提供洞見，並通過直觀方式傳達資訊的關鍵方面。牽強且過多的視覺化反而會雜亂無章，迷惑使用者，加重了大資料時代的資訊負擔。  

如同分叉路口上的一個匆忙過客，一個簡單的明瞭的方向指向牌即可為，樹立過多方向牌，雜亂的說明修飾都可能為其帶來不必要的麻煩。 

因此資料視覺化主要有三個目的：  

（1）大規模的視覺化更高效，使得人們能夠迅速從大量的資料樹立自己的見解  

（2）視覺化能夠幫助分析人員或者團隊在問題的本質分析上獲取更多洞見，並得到更為深入的瞭解  

（3）適當的視覺化能夠幫助人們建立一個描述狀況的共享檢視，並對需求採取的措施達成共識。  

資料不僅會越來越多、並且越來越開放，而且資料倉也將由孤立狀態變成關聯共享階段。由此便能聯通生活工作中衣食住行各個方面。

如何進行資料視覺化

大資料視覺化的過程探討 

（1）資料的視覺化

對原始資料採取合適的視覺化元素來表達，原始資料包括文字型資料、符號、影象、動畫、聲音等，這裡主要以數值文字型資料為本。 

（2）指標的視覺化

如同商店銷售一樣，銷售人員要完成上級給予的任務，必然需要制定自身的銷售指標，而指標的制定至關重要。例如人們需要獲取某一區域人口畫像，而指標則是該區域的人口數量、人口年齡情況、人口性別、消費情況、收入狀況等等。通過明確的指標視覺化構建整個區域的人口畫像，人們可以迅速制定下一步的策略。

（3）資料關係的視覺化

資料關係往往是視覺化資料需要核心表達的主題宗旨，書的關係是大小、多少、高低等等，而在視覺化展示中，則可以採用位置（上下左右）、大小、顏色等方式進行，而未來達到這樣的效果，我們需要排序、分類、透視等等操作運算。 

（4）背景資料的視覺化

視覺化要銘記一點“資料沒有價值，資訊才有價值”，這也是人們急需繼續努力在爆炸性增長的大資料中提煉有價值的資訊的原因。核心就是背景資料，例如銷售資料，只看銷售資料，真正有意義，為企業的決策服務，還需要更多的資料，典型的例如，需要銷售計劃資料，那麼在圖表中增加一條銷售計劃線，而銷售資料是否達到銷售計劃可以一目瞭然。 

（5）轉換成便於接受的形式

對同一原資料，其實存在不同的表達形式，通過需要根據資料型別及特徵來確定資料表達模型，但前提也需要考慮資料的接收群眾的不同。群眾年齡、收入、教育、職業等對資料模型的認識程度高低直接影響資料的效果。如50歲高層政府職員與20歲大學學生之間，對於前者更趨向穩重色系和資料的直觀表達。

（6）聚焦

在過載的資料中，並不可能對全部資料進行統一展示，因此我們需要將原有的視覺化進行二次優化，對那些需要強化的，小部分資料、資訊按照視覺化的標準，進行再次聚焦處理。

（7）集中或者彙總展示

彙總展示（集中）是資料視覺化必不可少的一環，通過前面資料指標、關係、聚焦等處理後，我們已經完成基本的資料視覺化設計，但如果存在過多的模型，就需要進行模型進行彙總展示。通過彙總模型，如一段文字型別、數值型別、圖形等告訴人們資料展示的核心意義，從而更好引導人們進行進一步的策略工作。

（8）掃尾處理

修飾性工作要做，這些工作是為了讓視覺化的細節更為精準、甚至優美，比較典型的工作包括設定標題，表明資料來源，對過長的柱子進行縮略處理，進行表格線的顏色設定，各種字型、圖素粗細、顏色設定等等。 

（9）風格化

風格化並非樣樣求異，相反是要標準化基礎下的特色化。例如佈局、用色、圖素，常用的圖表、資訊圖形式、資料、資訊維度控制，典型的圖示(ICON)，甚至動畫的時間、過渡等等。

資料的視覺化由最基礎的元素組成，就像邱南森《資料之美》提到9大元素：位置、長度、角度、方向、形狀、紋理、面積、色相、飽和度。

而這些最基礎的元素的組合便能構成前端中絢麗直觀的視覺化圖表，如長方形與高低長短量化組合成常見的柱狀模型。

下圖為我們提供模型選擇的思路，我們根據資料型別、指標權重、資料關係等確定資料最終呈現的模型。

以現在常用的大屏視覺化為例，大屏資料視覺化目前主要有資訊展示、資料分析及監控預警三大類。例如天貓雙11大屏視覺化，通過“大面積、炫酷動畫、豐富色彩”能在視覺感官下給大眾留下震撼而深刻的印象。  

雙11大屏背景資料來自不斷重新整理的消費記錄與及海量的消費人群。通過指標的定義， 梳理出關鍵指標，根據業務需求劃定各個指標的優先順序別，聚焦我們所需的資料。 確定指標分析緯度，選定視覺化型別（有效）。 

資料視覺化設計的注意原則

以終為起，如果使用者不能方便使用資料視覺化獲取結論並行事，不如放其尋祖，對於任何美學藝術的設計而言，清晰、實用性以及使用者友好性至關重要。  

減法法則，少即是多，蘋果產品能贏得設計界的讚美非因其包含的特徵，而是加以減略的特徵，拒絕任何功能過剩和繁雜介面。  

互動互通，如同地圖，使用者與地圖的不斷互動獲取必要的目的，因此增加互動能使得使用者迅速提出並回答問題，從而支撐其更好得決策。  

使用相對數，相對得反義是絕對，在資料視覺化得決策中，過多的絕對數是非常不明智缺乏理論基礎的，相對數能減少使用者“資料和什麼比較”的疑惑，從而更能獲取資料的來龍去脈。  

資料視覺化的未來

量化自我

未來我們不再被當成透明的存在，資料對個人的重構必將經歷從外帶內的整合。從智慧穿戴技術量化人體的身體溫度、血氧、心率，再到智慧人體晶片對基因的演變、記憶的儲存。無論資料將以螢幕還是VR全息視覺化的展示，毫無疑問，量化自我必將給人們帶來革命性的體驗。

物聯網

物聯網通過智慧感知、識別技術與普適計算等通訊感知技術，廣泛應用於網路的融合中。一個典型的例子是機器監控，使用安裝在不同機器部件上的多個感測器，將有關溫度、震動、壓力等資料上傳分析系統，分析系統對其進行處理識別及響應。視覺化便是分析系統與使用者間非常重要的一個橋樑，通過物聯網視覺化更加高效快捷整合連線生活工作中的實物。

文章圖片來自網路，侵刪

參考文章: 

維基百科.“資料視覺化” 

資料觀.大資料視覺化概念簡介以及相關工具介紹 

Phil Simon.大資料視覺化-重構智慧社會

圖表建議-一個想法的發起 ©2010A.V.Abela,http://www.extremepresentation.com