視覺化框架設計 資料調整

2022-03-08 18:20:56 字數 2173 閱讀 1772

資料對映到圖形時必須進行視覺編碼,視覺編碼包括幾何標記和視覺通道,幾何標記對應著多種圖表型別,視覺通道定義圖形屬性。視覺通道中最具區分度的通道是位置(position),圖形的位置在一些情況下會出現重疊:

所以我們需要對資料進行調整,使得圖形在畫布上不互相重疊。g2中支援以下幾種資料調整:

除了解決重疊問題外,有時候也需要對資料進行對稱處理,使得資料按照最大的資料進行對稱,所以增加一種調整:

我們調整資料的目的是為了使得圖形不互相遮擋、對資料的認識更加清晰,但是必須保證對資料的正確理解,需要遵循以下原則:

分類資料只能在分類範圍內調整資料的示例:

對於各種資料調整我們從以下幾個方面講解:

適合的資料型別

層疊資料,適用於分類資料和連續資料,只要x軸方向的值相同,就會對y軸方向的值進行層疊處理,例如:

原始資料

var data = [,]

a對映的x軸方向,b對映到y軸方向,發生層疊處理後:

data = [, ;

生成的圖形:

適合的幾何標記適合的資料型別

jitter,僅適合於分類資料,只能在同乙個分類的範圍內散開,這不會改變圖形表現的分類值。但是連續資料不能進行散開,連續資料位置一旦變化,圖形代表的資料值就會不準確,會帶來誤導。

對資料進行jitter調整時,需要將分類資料轉換成索引值,在索引值 [-0.5,0.5]的範圍內進行隨機分布,jitter示例:

資料:

var data = [,,,]

分類轉換成數字:

data = [,,,]

隨機散開資料

data = [,,,]

生成的圖形:

適合的幾何標記適合的資料

dodge 是將同乙個分類的資料均勻的分布在分類的範圍內,形成分組效果,同樣不適合連續資料。dodge跟jitter的差別在於:

資料:

var data = [,,,]

分類轉換成數字:

data = [,,,]

均勻分布

data = [,,,]

生成的圖形:

適合的幾何標記

適合的資料

symmetric 將資料沿y軸進行對稱處理,所以適合處理連續資料。由於對稱處理將單個值的資料處理成了有上下限的數值,所以不會引起資料的誤解。

資料:

var data = [,,]

對稱處理資料,由於b的範圍是[0-20],所以所有的資料都將在0-20之間對稱,計算公式如下:

offset = (max - min - value)/2;

調整結果:

[min + offset, value + offset]

data = [,,]

生成的圖形:

適合的幾何標記本章介紹了為什麼要調整資料,調整資料對圖表的影響,這些調整也會在後面的章節中有更多的介紹。下面我們開始具體幾何標記的介紹,介紹圖表的資料規範和對映規範,也可以從最簡單的點圖開始。

視覺化框架設計 資料型別

資料視覺化的本質就是將資料對映到圖形,不同資料型別的資料適合的圖形屬性也不一樣,本章講解資料分類和g2是如何設計資料分類。圖形屬性在下一章節視覺通道中講解。資料的型別可以按照兩種分類方式 資料自然的分類 資料是否連續 資料自然的分類 按照資料的自然分類,可以將數值型別分為 名詞 常見的名詞,不關心順...

視覺化框架設計 座標系

前面的章節中我們介紹過了視覺通道,視覺通道中識別度最高,同時支援定性 分類 資料和定量資料的視覺通道是位置 position 各種幾何標記最大的差異就在於資料空間位置的對映,我們將這個空間定義成座標系。常見的座標系 g2中主要實現了直角座標系和極座標系,座標系主要完成了兩個功能 視覺化編碼的兩個核心...

視覺化框架設計 視覺通道

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