可視化框架設計-數據調整

目錄

• 爲何進行數據調整
• 數據調整的原則
• 數據調整的類型
• 圖表類型和數據調整
• 更多

爲何進行數據調整

數據映射到圖形時必須進行視覺編碼，視覺編碼包括幾何標記和視覺通道，幾何標記對應着多種圖表類型，視覺通道定義圖形屬性。視覺通道中最具區分度的通道是位置（position)，圖形的位置在一些狀況下會出現重疊：

• 點圖常常存在點重疊的狀況。上圖的點圖有2000多條記錄，大多數點重疊在一塊兒
• 柱狀圖（interval) 在x軸是分類的狀況下，同一個分類下有多條記錄是也會重疊。上圖的柱狀圖，每一個分類下有7個柱狀圖，互相重疊，看不清晰各個分類的數據大小。

因此咱們須要對數據進行調整，使得圖形在畫布上不互相重疊。G2中支持如下幾種數據調整：

• stack(層疊），將同一個分類的數據值累加起來。以層疊的柱狀圖爲例，x軸方向的同一個分類下面的數據，按照順序，將y軸對應的值累加，最終將數據調整的再也不重疊。
• jitter(擾動散開），將數據的位置輕微的調整，使得映射後的圖形位置再也不重疊。
• dodge(分組散開），將同一個分類的數據進行分組在一個範圍內均勻分佈。

除了解決重疊問題外，有時候也須要對數據進行對稱處理，使得數據按照最大的數據進行對稱，因此增長一種調整：

• symmetric(數據對稱），使得生成的圖形居中對齊

數據調整的原則

咱們調整數據的目的是爲了使得圖形不互相遮擋、對數據的認識更加清晰，可是必須保證對數據的正確理解，須要遵循如下原則：

• 不能改變數據的含義，給用戶帶來誤解
• 數據調整的界限要清晰，不能混淆不一樣類別的數據
• 定量（連續）數據只能進行數據的累加和對稱，分類數據只能在當前分類的範圍內調整數據

分類數據只能在分類範圍內調整數據的示例：

• 點圖原本在一個分類下是摺疊在一塊兒的，能夠在這個分類佔有的畫布空間內抖開數據
  

• 同一個分類下的柱狀圖能夠均勻分佈在分類佔有的畫布空間實現分組的效果
  

數據調整的類型詳解

對於各類數據調整咱們從如下幾個方面講解：

• 適合的數據類型
• 適合的幾何標記

stack

適合的數據類型

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

原始數據

var data = [{a: 1,b: 10},{a:1, b: 12}] 

a映射的x軸方向，b映射到y軸方向，發生層疊處理後：

data = [{a: 1, b:[0,10]}, {a: 1, b: [10, 22]}; 

生成的圖形：

適合的幾何標記

• 層疊的點圖

• 層疊的柱狀圖、玫瑰圖

• 餅圖，餅圖本質上就是數據層疊佔滿了整個0-360度的圓形空間

jitter

適合的數據類型

jitter，僅適合於分類數據,只能在同一個分類的範圍內散開，這不會改變圖形表現的分類值。可是連續數據不能進行散開，連續數據位置一旦變化，圖形表明的數據值就會不許確，會帶來誤導。
對數據進行Jitter調整時，須要將分類數據轉換成索引值，在索引值 [-0.5,0.5]的範圍內進行隨機分佈，jitter示例：

數據：

var data = [{a: 'a1',b: 10},{a:'a1', b: 12},{a: 'a2',b:5},{a:'a2',b:3}] 

分類轉換成數字：

data = [{a: 0,b: 10},{a:0, b: 12},{a: 1,b:5},{a:1,b:3}] 

隨機散開數據

data = [{a: -0.3,b: 10},{a:0.2, b: 12},{a: 0.8,b:5},{a:1.4,b:4}] 

生成的圖形：

適合的幾何標記

• 散開的點圖：

dodge

適合的數據

dodge 是將同一個分類的數據均勻的分佈在分類的範圍內，造成分組效果,一樣不適合連續數據。dodge跟jitter的差異在於：

• dodge的數據在分類範圍內將數據均勻分佈
• 若是數據只有一維，y軸方向無數據，那麼jitter在整個y軸方向隨機分佈，而dodge在y軸方向層疊分佈

數據：

var data = [{a: 'a1',b: 10},{a:'a1', b: 12},{a: 'a2',b:5},{a:'a2',b:3}] 

分類轉換成數字：

data = [{a: 0,b: 10},{a:0, b: 12},{a: 1,b:5},{a:1,b:3}] 

均勻分佈

data = [{a: -0.25,b: 10},{a:0.25, b: 12},{a: 0.75,b:5},{a:1.25,b:4}] 

生成的圖形：

適合的幾何標記

• 一維點圖

• 二維的柱狀圖、玫瑰圖(interval)

symmetric

適合的數據

symmetric 將數據沿y軸進行對稱處理，因此適合處理連續數據。因爲對稱處理將單個值的數據處理成了有上下限的數值，因此不會引發數據的誤解。

數據：

var data = [{a: 'a1',b: 10},{a: 'a2',b:5},{a:'a3',b:20}] 

對稱處理數據，因爲b的範圍是[0-20]，因此全部的數據都將在0-20之間對稱,計算公式以下:

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

調整結果：

[min + offset, value + offset]

data = [{a: 'a1',b: [5,15]},{a: 'a2',b:[7.5,12.5]},{a:'a3',b:[0,20]}] 

生成的圖形：

適合的幾何標記

• 漏斗圖：將柱狀圖調整成對稱柱狀圖，而後再鏈接柱狀圖的頂點，便可成爲漏斗圖

• 數據流圖：對稱的層疊區域圖

更多

本章介紹了爲何要調整數據，調整數據對圖表的影響，這些調整也會在後面的章節中有更多的介紹。下面咱們開始具體幾何標記的介紹，介紹圖表的數據規範和映射規範，也能夠從最簡單的點圖開始。

 

G2地址：https://g2.alipay.com/