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

視覺通道

• 視覺通道簡介
• 數據如何映射到視覺通道
• 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