資料視覺化的核心內容是視覺化編碼,是將資料資訊對映成視覺化元素的技術。視覺化編碼由兩部分組成:幾何標記(圖形元素)和視覺通道。
人類對視覺通道的識別有兩種基本的感知模式。第一種感知模式得到的資訊是關於物件本身的特徵和位置等,對應視覺通道的定性性質和分類性質;第二種感知模式得到的資訊是物件某一屬性在數值上的大小,對應視覺通道的定量性質或者定序性質。因此我們將視覺通道分為兩大類:
然而兩種分類不是絕對的,例如位置資訊,既可以區分不同的分類,又可以分辨連續資料的差異
進行視覺化編碼時我們需要考慮不同視覺通道的表現力和有效性,主要體現在下面幾個方面:
視覺通道的表現力:
視覺化編碼的過程可以理解為資料的字段和視覺化通道之間建立對應關係的過程,它們的對映關係如下:
* 乙個資料字段對應乙個視覺通道(1:1)
* 乙個資料字段對應多個視覺通道(1:n)
* 多個資料字段對應乙個視覺通道(n:1)
我們看下面的示例:
本圖存在以下1:1的對映關係:
chart.interval().position('班級*人數');
本圖存在以下對映關係:
所以班級的對映存在兩個視覺通道 1:n。
chart.interval().position('班級*人數').color('班級');
顏色由班級和學生人數共同決定,規則如下:
班級和學生人數共同決定了顏色對映,所以此對映是 n:1
chart.interval().position('班級*人數').color('班級*人數',function(grade,count) else
});
在 g2 中我們並沒有實現上面提到的所有的視覺通道,而是下面幾種:
g2 中的視覺通道作為標記的屬性存在,需要支援以下功能:
類結構如下:
所以視覺通道在g2的語法中這樣定義:
chart.(dims,[callback])
除了attr(dims,callback)的函式原型外,g2為了使用者的便利性,結合各個視覺通道的特點,也提供了更為便捷的使用方式,在本章後面有詳細的介紹。
示例:
chart.point().position('a*b').color('c');
chart.interval().position('a*b').color('c',function(c)
return 'green';
});
位置是唯一的既可以用於編碼分類,又可用於編碼定序或者定量的資料屬性。在二維平面上有垂直方向和水平方向兩個可以分離的視覺通道。所以position屬性支援的使用者輸入方式:
一維點圖
二維點圖
從視覺化編碼的角度對顏色進行分析,可以將顏色分為亮度、飽和度和色調三個視覺通道,其中前2個可以認為是定量和定序的視覺通道,而色調屬於定性的視覺通道。而我們在g2中我們並不區分這3個視覺通道,因此我們認為顏色既是分類又是定量的視覺通道。所以color方法有更多的快捷方式:
分類資料的顏色對映:
定量(連續)資料的顏色對映:
從視覺化的角度分析,大小(size)是乙個複雜的視覺通道,對於不同的標記含義不完全一致:
size 的快捷方式:
更多的對size的解釋可以檢視後面章節的各個幾何標記中對size的解析
點圖大小:
柱狀圖的大小:
不同的幾何標記有不同的shape(形狀),各自的章節中有詳細介紹。shape這個視覺通道受其他幾個視覺通道影響,比如:shape可以將color對映到填充色上,也可以對映到邊框上。shape方法的使用方式比較簡單,常用於對映分類資料:
點圖的形狀:
柱狀圖的形狀:
透明度在視覺編碼過程中,只能進行定量(連續)資料的對映,作為顏色的乙個補充使用,所以提供以下快捷方式:
本章介紹了視覺通道和g2中視覺通道的設計,不同視覺通道在各種幾何標記中的實現不同,後面的章節中會有更詳細的介紹,下一章節,我們介紹座標系,並**不同視覺通道在不同座標系下的不同表現。
g2站點:
視覺化框架設計 座標系
前面的章節中我們介紹過了視覺通道,視覺通道中識別度最高,同時支援定性 分類 資料和定量資料的視覺通道是位置 position 各種幾何標記最大的差異就在於資料空間位置的對映,我們將這個空間定義成座標系。常見的座標系 g2中主要實現了直角座標系和極座標系,座標系主要完成了兩個功能 視覺化編碼的兩個核心...
視覺化框架設計 整體思路
資料視覺化的本質是 將資料對映到圖形,同時將一些附加資訊傳達給使用者。乙個視覺化框架需要四部分 資料處理模組,對資料進行加工的模組,包括一些資料處理方法。例如 合併 分組 排序 過濾 計算統計資訊等 圖形對映模組,將資料對映到圖形視覺通道 後面章節介紹 的過程。例如 將資料對映成顏色 位置 大小等 ...
視覺化框架設計 資料調整
資料對映到圖形時必須進行視覺編碼,視覺編碼包括幾何標記和視覺通道,幾何標記對應著多種圖表型別,視覺通道定義圖形屬性。視覺通道中最具區分度的通道是位置 position 圖形的位置在一些情況下會出現重疊 所以我們需要對資料進行調整,使得圖形在畫布上不互相重疊。g2中支援以下幾種資料調整 除了解決重疊問...