[技術分享] 數據可視化基礎—視覺編碼

 作者:新投云  瀏覽數:

可視化編碼是可視化中的核心內容,本文會對其進行詳細的講解,尤其是視覺編碼視覺通道兩個概念,如果其中遇到晦澀之處,不要心急,可囫圇吞棗直接往下看。

什么是視覺編碼(visual encoding)

很多人可能看到題目的時候就有這個疑問,到底什么是視覺編碼。其實視覺編碼很簡單,用一句話就能概括:

視覺編碼描述的是將數據映射到最終可視化結果上的過程。

這里的可視化結果可能是圖片,也可能是一張網頁等等。

編碼二字,如果說是指設計、映射的過程,那么碼呢?其實指的是一些圖形符號。

圖形能告訴我們什么

在介紹各類圖形符號之前,我們先談談:圖形能告訴我們什么。

仔細觀察上方這個簡單的圖片,你能得得到什么信息?

  1. A B C 是不同的
  2. B 在 A 和 C 的中間
  3. BC 的長度是 AB 的大概兩倍

得益于我們視覺系統的強大,這些信息不假思索就能得出。如果把上圖想象成一個二維坐標系,則我們可能得出更多的結論。

“Resemblance, order and proportion are the three signfields in graphics.” - Bertin [1]

圖形符號和信息間的映射關系使我們能迅速獲取信息。所以我們可以把圖片看成一組圖形符號的組合,這些圖形符號中攜帶了一些信息,我們稱作它編碼了一些信息。而當人們從這些符號中讀取信息時,我們稱作我們解碼了一些信息。

我們人類解碼信息靠的是我們的眼睛、我們的視覺系統。如果說圖形符號是編碼信息的工具或通道、那么我們的視覺就是解碼信息的通道。因此,我們通常把這種圖形符號<——>信息<——>視覺系統的對應稱作視覺通道

至此算是把視覺通道視覺編碼這兩個概念講清楚了。如果一個人說他想用四個通道來編碼四個維度的數據,即可以翻譯成他想用四種圖形符號來對應這份數據表的四個列的信息。

這里舉個例子(例子來自于 [2]陳為 沈則潛 陶煜波. 數據可視化[M]. 電子工業出版社, 2013.):

例子來自于陳為 沈則潛 陶煜波《數據可視化》例子來自于陳為 沈則潛 陶煜波《數據可視化》

  • 上圖中圖 A 表示了三個不同班級的數學平均分,用柱狀圖表示,柱狀圖的高度作為一個視覺通道,編碼了數學平均分的;柱狀,這個形狀作為一個視覺通道編碼了數學平均分這一屬性
  • 圖 B 中,我們想在 A 的基礎上多展示語文平均分這一項數據(即增加了一個數據維度),則選用點這個形狀通道編碼這兩個屬性;點的橫坐標編碼語文平均分的;點的縱坐標編碼數學平均分的
  • 這時候發現圖 B 中我們把班級這個數據維度給丟掉了,于是我們可以用顏色這一視覺通道來編碼班級這個屬性信息,如圖 C。
  • 如果我們還想展示班級人數這一信息,則可以用尺寸這一視覺通道來編碼,如圖 D。

視覺編碼中常用的視覺通道

1967 年,Jacques Bertin 初版的《Semiology of Graphics》一書提出了圖形符號與信息的對應關系(就是本文上一節的內容),奠定了可視化編碼的理論基礎。

Bertin J. Semiology of graphics: diagrams[C]// Conference on Computer Networks. 1983.Bertin J. Semiology of graphics: diagrams[C]// Conference on Computer Networks. 1983.

如上圖所示,書中把圖形符號分為兩種:

  • 位置變量:一般指二維坐標
  • 視網膜變量尺寸數值紋理顏色方向形狀

以上基本的圖形符號共有 7 種。將其映射到點、線、面之后,就相當于有 21 種編碼可用的視覺通道。后來人們還又補充了幾種其他的視覺通道:長度面積體積透明度模糊/聚焦動畫等,所以可用的視覺通道其實太多了。

而一般一份可視化作品可用到的視覺通道要盡可能得少,因為太多了反而會造成我們視覺系統的混亂,使我們獲取信息更難。于是這就涉及到了視覺通道的設計原則。

視覺編碼設計原則

這一節其實可以單獨再分一篇文章寫,因為可視化編碼設計實在是復雜:假設我們有 k 個視覺通道,有 n 個數據維度,則一共有 (n+1)^k 種編碼方案……從中選出一種最佳方案難度可見一斑。

不過既然本文是講解視覺編碼相關,所以這個章節是逃不掉的,在此提綱挈領講一下。如果想深入了解,可以閱讀參考文獻中提到的書籍。

視覺通道的三個性質

上一篇數據模型講解了可視化中數據分為三類:類別型有序型數值型

  1. 定性性質(或叫分類性質)。適用于類別型數據。比如形狀或顏色,這兩個視覺通道,非常容易被人眼識別。從一堆正方形中識別出一個三角形,或看萬綠叢中一點紅,都是我們眼睛拿手好戲。
  2. 定量性質或定序性質。適用于有序型和類別型數據。比如長度、大小特別適合于編碼數值/量的大小。
  3. 分組性質。具有相同視覺通道的數據,人眼也能很快識別出來,將其歸為一組。

總結一下視覺通道與數據類型的對應關系,如下圖所示:

視覺通道與數據類型的對應視覺通道與數據類型的對應

視覺編碼設計的兩大原則

Mackinlay[4] 和 Tversky[5] 分別提出了兩套可視化設計的原則,Mackinlay 強調表達性和有效性,Tversky 強調一致性和理解性。兩者可以糅合起來:

  1. 表達性、一致性:可視化的結果應該充分表達了數據想要表達的信息,且沒有多余。
  2. 有效性、理解性:可視化之后比前一種數據表達方案更加有效,更加容易讓人理解。

下面這張圖總結了視覺編碼面對不同數據類型的優先級:

視覺編碼面對不同數據類型的優先級視覺編碼面對不同數據類型的優先級

如果要具體展開每項視覺通道來說,未免有點太繁瑣,而且設計可視化編碼除了視覺通道還需要考慮:

  • 色彩搭配
  • 交互
  • 美學因素
  • 信息的密度
  • 直觀映射、隱喻

以上每一項都很重要,之后有機會再寫吧。這個可視化基礎系列總算是完結了,文字雖然不多,但是搜索資料、讀論文、總結等還是挺累的,希望你能有所收獲。

相關文章

一分钟快三计划软件