視覺化框架設計 座標系

2022-03-08 18:20:57 字數 2186 閱讀 8998

前面的章節中我們介紹過了視覺通道,視覺通道中識別度最高,同時支援定性(分類)資料和定量資料的視覺通道是位置(position)。各種幾何標記最大的差異就在於資料空間位置的對映,我們將這個空間定義成座標系。常見的座標系:

g2中主要實現了直角座標系和極座標系,座標系主要完成了兩個功能:

視覺化編碼的兩個核心組成部分:幾何標記和視覺通道。視覺通道我們已經在前面的章節中介紹過,幾何標記我們將在後面的章節中介紹。我們以直角座標系下的柱狀圖為例,講解幾何標記在直角座標系和極座標系下的不同視覺效果。

柱狀圖在直角座標系下,由四個點構建成的矩形構成:

柱狀圖到了極座標下,依然由四個點連線而成,變化僅僅在於到圓心距離相等的兩個點間的直線變成圓弧:

視覺化的過程是資料到圖形的對映過程,只要資料對映的通道一致,那麼我們就可以使用一種方式將幾何圖形在不同的座標系下繪製出來。

下面的柱狀圖所有的項累加起來是100%,占用了全部的高度,各項層疊。

此時我們將座標系轉換成極座標系:

依然是上面的示例,我們將x軸、y軸置換,y軸表示資料的分類,x軸表示資料的大小:

此時我們將座標系轉換成極座標系:

餅圖就生成了,此時如果我們使用兩個分類的資料,會出現什麼效果?看下圖:

此時就生成了巢狀的餅圖

上面我們講解了相同的幾何圖形在不同座標系下的不同展示效果,由於直角座標系是兩個垂直向量構建而成的,視覺通道都是位置(postion)的兩個子通道(x,y),而極座標,是由角度和長度兩個維度構建而成,角度和位置在視覺通道中的表現力有所差異:

所以在使用圖形和座標系時需要理解清晰資料字段和視覺通道的對映關係,在合適的場景選擇合適的視覺通道。

座標系可以進行以下操作:

結合上面的內容,直角座標系和極座標系必須具有的屬性或介面:

屬性名含義

start

座標系的起始點

end座標系的結束點

方法名含義

convert(point)

將資料從0-1空間對映到畫布空間

invert(point)

將資料從畫布空間反轉回0-1空間

translate(x,y)

平移rotate(angle)

旋轉scale(sx,sy)

方法、縮小

transpose()

x,y交換

reflect(『x』

『y』)

由於極座標是由角度和半徑長度兩個維度共同構成的,所以有自己特有的屬性:

方法名含義

radius

半徑長度,0-1範圍內的數值,最終的半徑長度 = min(長,寬) / 2 * radius

inner

plus座標系下,內部空白的半徑大小,空白的半徑 = min(長,寬) / 2 * inner

startangle

極座標的起始角度

endangle

極座標的結束角度

指定了起始角度、結束角度的玫瑰圖:

g2**:

視覺化框架設計 視覺通道

資料視覺化的核心內容是視覺化編碼,是將資料資訊對映成視覺化元素的技術。視覺化編碼由兩部分組成 幾何標記 圖形元素 和視覺通道。人類對視覺通道的識別有兩種基本的感知模式。第一種感知模式得到的資訊是關於物件本身的特徵和位置等,對應視覺通道的定性性質和分類性質 第二種感知模式得到的資訊是物件某一屬性在數值...

視覺化框架設計 整體思路

資料視覺化的本質是 將資料對映到圖形,同時將一些附加資訊傳達給使用者。乙個視覺化框架需要四部分 資料處理模組,對資料進行加工的模組,包括一些資料處理方法。例如 合併 分組 排序 過濾 計算統計資訊等 圖形對映模組,將資料對映到圖形視覺通道 後面章節介紹 的過程。例如 將資料對映成顏色 位置 大小等 ...

視覺化框架設計 資料調整

資料對映到圖形時必須進行視覺編碼,視覺編碼包括幾何標記和視覺通道,幾何標記對應著多種圖表型別,視覺通道定義圖形屬性。視覺通道中最具區分度的通道是位置 position 圖形的位置在一些情況下會出現重疊 所以我們需要對資料進行調整,使得圖形在畫布上不互相重疊。g2中支援以下幾種資料調整 除了解決重疊問...