數據可視化為了達到增強人腦認知的目的，會利用不同的視覺通道對冰冷的數據進行視覺編碼。

我們在數據可視化的時候，一方面，展現可視化對象本身的位置、特性，對應的視覺通道類型是定性或者分類，比如汽車在什么地方、汽車的種類；另一方面，展現對象的某一個屬性值大小，對應的視覺通道類型是定量或者定序，汽車的油耗、汽車加油的排隊順序。

那么，有哪些具體的視覺通道呢？下面就跟大家介紹幾種常見的視覺通道，文末有視覺通道的表現力排序圖，心急的記住這個圖就可以了。

用于分類的視覺通道

位置

平面位置在所有的視覺通道中比較特殊，一方面，平面上相互接近的對象會被分成一類，所以位置可以用來表示不同的分類；另一方面，平面使用坐標來標定對象的屬性大小時，位置可以代表對象的屬性值大小，即平面位置可以映射定序或者定量的數據，比如下面會講到的「坐標軸位置」。

平面位置又可以被分為水平和垂直兩個方向的位置，它們的差異性比較小，但是受到重力場的影響，人們更容易分辨出高度，而不是寬度，所以垂直方向的差異能被人們快意識到，這就解釋了為什么計算機屏幕設計成 16：9、4：3，這樣的設計可以使得兩個方向的信息量達到平衡。

色調

我們認識色調只會從定性的角度，平常我們所說的「冷暖色調」，就是我們看一個東西、一幅圖，它所表現出來的情感強烈程度，這沒法從定量的角度去判別冷艷或是熱烈的色調。

認識色調，我們要明白這三點：

純色就是色調

向純色（色調）增加黑色就構成了暗色

向純色（色調）增加白色就構成了亮色

形狀

形狀所代表的含義很廣，一般理解為對象的輪廓，或者對事物外形的抽象，用來定性描述一個東西，比如圓形、正方形，更復雜一點是幾種圖形的組合。

圖案

圖案也被稱為紋理，大致可以被分為自然紋理、人工紋理。自然紋理是自然世界中存在的有規則模式的圖案，比如樹木的年輪；人工紋理是指人工實現的規則圖案，比如中學課本上求陰影部分的面積示意圖。

由于紋理可以看作是對象表面或者內部的裝飾，所以可以將紋理映射到線、平面、曲面、三維體的表面中，以分類不同的事物。

用于定量/定序的視覺通道

坐標軸位置

坐標軸上的位置就是前面的位置中的定量功能，使用坐標軸對數據的大小關系進行定量或者排序操作。

長度

長度也可以被稱之為一維尺寸，當尺寸比較小的時候，其他的視覺通道容易受到影響，比如一個很大的紅色正方形比一個紅色的點更容易讓人區別，人們對很小的形狀也無法區別。

根據史蒂文斯冪次法則，人們對一維的尺寸，即長度或寬度，有清晰的認識。隨著維度的增加，人們的判斷越來越不清楚，比如二維尺寸（面積）。因此，在可視化的過程成，我們往往將重要的數據用一維尺寸來編碼。

角度

角度還有一個名字叫做「方向」，方向不僅僅可以用來分類，也可以用來排序，這得看我們可視化的時候選擇什么樣的象限。

在二維可視化的世界里，四個象限可以有三種用法：

在一個象限內表示數據的順序

在兩個象限內表現數據的發散性

在四個象限內可以對數據進行分類

面積

面積在前面的尺寸已經講過了，就是二維的尺寸。

亮度/飽和度

亮度（luminance）是表示人眼對發光體或被照射物體表面的發光或反射光強度實際感受的物理量[3]。簡而言之，當任兩個物體表面在照相時被拍攝出的最終結果是一樣亮、或被眼睛看起來兩個表面一樣亮，它們就是亮度相同。 在可視化方案中,盡量使用少于 6 個可辨識的亮度層次，兩個亮度層次之間的邊界也要明顯。

飽和度指得是色彩的純度，也叫色度或彩度，是“色彩三屬性”之一。如大紅就比玫紅更紅，這就是說大紅的色度要高。飽和度跟尺寸有很大的關系，區域大的適合用低飽和度的顏色填充，比如散點圖的背景；區域小的使用更亮、顏色更加豐富、飽和度更高的顏色加以填充，便于用戶識別，比如散點圖的各個散點。小區域使用的飽和度通常只有 3 層，大區域的可以適當增加一些

圖案密度

圖案密度是表現力最弱的一個視覺通道，在實際應用中很少看到它的身影。可以把它當作成同一形狀、尺寸、顏色的對象的集合，用來表示定量或定序的數據。

用于表示關系的

包含

包含是將相同屬性的對象聚集在一起，并把他們囊括到一個區域，這個區域與其他區域具有明顯的分界線，比如方框、圓形等等

連接

連接關系在表示網絡關系型數據中使用，比如郵件收發關系中，收件人與發件人之間的關系，使用線段進行連接，表示他們之間具有一定的聯系。

相似

相似經常和顏色進行搭配使用，屬性類似的對象之間的關系使用相同色調，不同亮度的顏色進行表示。

接近

如果說相似借用顏色來聚類屬性相似、相同的對象，那么接近就是利用距離來表示這些對象。這可以體現在設計原則中的親密性原則，相同性質的事物應該放在一起。

最后說一點

視覺通道的分類不是唯一的，比如位置信息，既能區分不同的分類，又可以用來表示連續數據的差異，所以在數據可視化的過程中，我們應該根據需要做一定調整。

表現力排序表

參考文獻

[1] 陳為, 張嵩, 魯愛東. 數據可視化的基本原理與方法[M]. 科學出版社, 2013.

[2] RobinWilliams. 寫給大家看的設計書[M]. 人民郵電出版社, 2016.

[3] https://zh.wikipedia.org/wiki/亮度

---

歡迎大家關注微信公眾號：可視化技術（ visteacher ）

不僅有前端和可視化，還有算法、源碼分析、書籍相送

個人網站：http://blog.kurryluo.com

各個分享平臺的 KurryLuo 都是在下。

用心學習，認真生活，努力工作！

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的数据可视化的基本原理——视觉通道的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。