可視化框架設計-視覺通道

視覺通道

• 視覺通道簡介
• 數據如何映射到視覺通道
• G2視覺通道的設計
• 更多

視覺通道簡介

數據可視化的核心內容是可視化編碼，是將數據信息映射成可視化元素的技術。可視化編碼由兩部分組成：幾何標記（圖形元素）和視覺通道。

• 幾何標記：可視化中標記通常是一些幾何圖形元素，例如：點、線、面、體

• 視覺通道：用於控制幾何標記的展示特性，包括標記的位置、大小、形狀、方向、色調、飽和度、亮度等

視覺通道的類型

人類對視覺通道的識別有兩種基本的感知模式。第一種感知模式得到的信息是關於對象本身的特征和位置等，對應視覺通道的定性性質和分類性質；第二種感知模式得到的信息是對象某一屬性在數值上的大小，對應視覺通道的定量性質或者定序性質。因此我們將視覺通道分為兩大類：

• 定性（分類）的視覺通道，如形狀、顏色的色調、空間位置
• 定量（連續、有序）的視覺通道，如直線的長度、區域的面積、空間的體積、斜度、角度、顏色的飽和度和亮度等

然而兩種分類不是絕對的，例如位置信息，既可以區分不同的分類，又可以分辨連續數據的差異

視覺通道的表現力

進行可視化編碼時我們需要考慮不同視覺通道的表現力和有效性，主要體現在下面幾個方面：

• 准確性，是否能夠准確得在視覺上表達數據之間的變化
• 可辨認性，同一個視覺通道能夠編碼的分類個數，即可辨識的分類個數上限
• 可分離性，不同視覺通道的編碼對象放置到一起，是否容易分辨
• 視覺突出，重要的信息，是否用更加突出的視覺通道進行編碼

視覺通道的表現力： 

數據和視覺通道的映射

可視化編碼的過程可以理解為數據的字段和可視化通道之間建立對應關系的過程，它們的映射關系如下： 
* 一個數據字段對應一個視覺通道（1：1） 
* 一個數據字段對應多個視覺通道（1：n) 
* 多個數據字段對應一個視覺通道（n：1）

我們看下面的示例：

• 班級的學生數

本圖存在以下1：1的映射關系：

• x軸：班級名作為分類數據映射到位置的視覺通道
• y軸：學生數是一個連續性數據，映射到矩形的長度

chart.interval().position('班級*人數');

• 不同班級不同的顏色

本圖存在以下映射關系：

• x軸：班級名作為分類數據映射到位置
• y軸：學生數是一個連續性數據，映射到矩形的長度
• 同時，為了區分不同的班級，將班級也映射到顏色

所以班級的映射存在兩個視覺通道 1：n。

chart.interval().position('班級*人數').color('班級');

• 人數和班級共同決定顏色

顏色由班級和學生人數共同決定，規則如下：

• 如果班級等於 ‘1’ 或者人數大於 40 則映射成紅色
• 其他則映射成綠色

班級和學生人數共同決定了顏色映射，所以此映射是 n：1

chart.interval().position('班級*人數').color('班級*人數',function(grade,count){ if (grade == '1' || count > 40) { return 'red'; } else { return 'green'; } });

G2 視覺通道的設計

實現的視覺通道

在 G2 中我們並沒有實現上面提到的所有的視覺通道，而是下面幾種：

• position(位置)，二維坐標系內可以映射到 x, y，三維坐標系可以映射到 x, y, z
• color（顏色），包含了色調、飽和度和亮度
• size（大小），不同的幾何圖形對大小的定義有所差異
• shape（形狀），幾何圖形的形狀決定了某個圖表類型的表現方式。例如點圖，可以使用圓點、三角形、小的圖片表示；線圖可以使用折線、曲線、點線等表現形式
• opacity（透明度），圖形的透明度，這個屬性從某種意義上來說可以使用顏色代替，需要使用 ‘rgba’ 的形式，所以在 G2 中我們獨立出來。

語法設計

G2 中的視覺通道作為標記的屬性存在，需要支持以下功能：

• 支持1：1,1:n,n：1多種數據和視覺通道的映射
• 不同的標記決定圖形對視覺通道的解析各不相同

類結構如下： 

所以視覺通道在G2的語法中這樣定義：

chart.<geom><attr>(dims,[callback])

• geom，幾何標記，在后面的章節中介紹
• attr，幾何標記的屬性，對應視覺通道
• dims，參與單個視覺通道映射的字段
• callback，如何解析視覺通道，可以不提供，G2提供了默認的視覺通道解析方式

除了attr(dims,callback)的函數原型外，G2為了用戶的便利性，結合各個視覺通道的特點，也提供了更為便捷的使用方式，在本章后面有詳細的介紹。

示例：

chart.point().position('a*b').color('c'); chart.interval().position('a*b').color('c',function(c){ if(c) { return 'red' } return 'green'; });

position

位置是唯一的既可以用於編碼分類，又可用於編碼定序或者定量的數據屬性。在二維平面上有垂直方向和水平方向兩個可以分離的視覺通道。所以position屬性支持的用戶輸入方式：

• postion(‘dim’)，僅使用一維的水平方向（x軸）的視覺通道，此時,垂直方向的視覺通道沒有數據含義。
• postion(‘dim1*dim2’)，同時使用水平和垂直2個視覺通道

一維點圖

二維點圖

color

從可視化編碼的角度對顏色進行分析，可以將顏色分為亮度、飽和度和色調三個視覺通道，其中前2個可以認為是定量和定序的視覺通道，而色調屬於定性的視覺通道。而我們在G2中我們並不區分這3個視覺通道，因此我們認為顏色既是分類又是定量的視覺通道。所以color方法有更多的快捷方式：

• color(‘c’)，使用默認的回調函數，讀取一個數組中的顏色進行顏色的映射
• color(‘c’,colors)，指定映射的顏色類型，此時通常映射到分類數據
• color(‘c’,’color1-color2-colorn’)，指定顏色的漸變路徑，在這個漸變路徑映射定量（連續)的數據
• color(‘red’) 直接指定常量，不進行數據映射

分類數據的顏色映射：

定量（連續）數據的顏色映射：

size

從可視化的角度分析，大小（size)是一個復雜的視覺通道，對於不同的標記含義不完全一致：

• 對於點來說size 對應的是點的半徑
• 對於線來說size對應的是線的粗細
• 對於柱狀圖來說size是柱狀圖的寬度

size 的快捷方式：

• size(dim) 指定映射到size的字段，內置最大和最小（像素大小）
• size(dim,max,min)，指定映射到size字段外，還提供了最大像素和最小像素
• size(10) 直接指定像素大小

更多的對size的解釋可以查看后面章節的各個幾何標記中對size的解析

點圖大小：

柱狀圖的大小：

shape

不同的幾何標記有不同的shape(形狀)，各自的章節中有詳細介紹。shape這個視覺通道受其他幾個視覺通道影響，比如：shape可以將color映射到填充色上，也可以映射到邊框上。shape方法的使用方式比較簡單，常用於映射分類數據：

• shape(‘dim’)，將指定的字段映射到內置的shapes數組中
• shape(‘dim’,shapes)，用戶自己提供shapes數據，來進行數據映射
• shape(‘dim’,callback)，使用回調函數獲取shape
• shape(‘circle’)，指定常量，映射到固定的shape

點圖的形狀：

柱狀圖的形狀：

opacity

透明度在視覺編碼過程中，只能進行定量（連續）數據的映射，作為顏色的一個補充使用，所以提供以下快捷方式：

• opacity(‘dim’) 指定透明度映射的字段
• opacity(0.5) 直接指定透明度常量
• opacity(‘dim’,callback) 使用回調函數獲取透明度

更多

本章介紹了視覺通道和G2中視覺通道的設計，不同視覺通道在各種幾何標記中的實現不同，后面的章節中會有更詳細的介紹，下一章節，我們介紹坐標系，並探討不同視覺通道在不同坐標系下的不同表現。

G2站點： http://g2.alipay.com