整體思路
- 可視化框架的構成
- G2的框架結構
- 數據圖形映射的流程
可視化框架的構成
數據可視化的本質是:將數據映射到圖形,同時將一些附加信息傳達給用戶。
一個可視化框架需要四部分:
* 數據處理模塊,對數據進行加工的模塊,包括一些數據處理方法。例如:合並、分組、排序、過濾、計算統計信息等
* 圖形映射模塊,將數據映射到圖形視覺通道(后面章節介紹)的過程。例如:將數據映射成顏色、位置、大小等
* 圖形展示模塊,決定使用何種圖形來展示數據,點、線、面等圖形標記
* 輔助信息模塊,用於說明視覺通道跟數據的映射關系,例如:坐標軸、圖例、輔助文本等
G2的框架結構
G2實現了上面的四個模塊,並且對着四個模塊做了更進一步的細分:
這些細分的模塊在單獨的章節中各自介紹:
- DataFrame 數據的處理模塊,常見的數據處理方法
- Stat 對數據進行統計的模塊,min,max,mean等常見的統計
- Scale 將數據映射到0-1之間,方便映射到視覺通道
- Att,圖形屬性,數據映射到圖形的視覺通道,包括位置、顏色、大小、形狀等
- Coord 展示圖形需用到的坐標系,將數據映射到位置的視覺通道(屬性)
- View 視圖,一個畫布上可以顯示多張圖表,每個圖表有各自的繪圖區域、數據源、坐標系等信息
- Geom 數據映射到的幾何標識,G2中的幾何標識有:點、線、路徑、面積、多邊形等
- Shape更加細分的幾何標識的圖形,例如,點可以分為圓點、正方形、十字等,線可以分為點線、折線、曲線等
- Axis 坐標軸,輔助用戶識別圖形所在的位置,判斷數據大小的輔助元素
- Legend 圖例,輔助用戶識別圖形的大小、顏色、形狀,通常用於判斷數據對應圖形的分類
- Tooltip 提示信息,用戶鼠標在畫布上移動時,實時出現的鼠標附近的數據信息
- Guide其他輔助元素,可以在圖上添加輔助的文本、輔助圖片、輔助線等,增強用戶對圖形的認知。
數據圖形映射的流程
可視化從數據映射到圖形需要以下流程:
- 原始數據:加載到頁面上的JSON數組
- 統計分析:統計函數加工數據
- 預處理數據:每個視圖接收到的數據
- 過濾:行過濾,列過濾(是否保存整條數據,后面討論)
- 關注數據: 對數據進行行列的過濾,當前圖表關注的數據
- 映射:將數據從數值域轉換幾何屬性
- 繪制:調用繪圖庫,繪制出圖形
- 圖像數據:最終形成的圖表
g2的數據映射流程
G2的數據映射到圖形的過程整體上遵循這個流程,但是細節上有所增加:
幾個大的流程:
- G2的數據可以在外部處理完畢后傳入圖表中,統計函數也可以在外部執行
- View 中對數據進行初步的處理,對數據進行格式化成數字、調整數據等操作
- Core 核心層處理圖形的數據的映射
小流程的簡介:
- 統計,對數據進行統計處理,用戶可以在傳入G2的圖表前對數據進行統計,也可以將統計函數嵌入G2的語法中
- 過濾,對數據進行過濾,G2中圖例的操作也會引起數據的過濾
- view中設置數據源,單個視圖(view)擁有自己的數據源,多個View可以同時在一個畫布上出現,展示異構數據
-
過濾列,防止傳入數據的列數過多,僅過濾出參與語法的列
var data = [{a: '1',b: 'b',c: 'c1',d: 10}] // 數據中存在a,b,c,d四列 。。。 chart.point().position('a*b').color('c') // a,b,c參與了語法,所以d字段被過濾掉
- 1
- 2
- 3
- 1
- 2
- 3
- 數字化,將分類類型,時間類型的數據轉換成數字,為了可以執行“數據調整”,調整圖形在畫布上的位置
-
數據調整,為了更清晰的展示數據,圖形有時候需要層疊、分組、散開等,此時需要對數據進行調整
-
訓練度量度量包含了數據字段的信息,例如連續字段的最大值、最小值等信息,分類字段包含的分類,數據一旦進行調整,那么度量中的信息不再准確,所以需要進行度量的訓練
- 歸一化,將數據的值映射到 0-1空間內,方便數據到視覺通道的映射
-
計算圖形需要的點,繪制圖形時需要多個點,例如繪制一個柱狀圖,需要4個點,如果將坐標系轉換,仍然是這4個點,僅僅是連接點的方式不同,就會生成不同的圖表
-
映射,將數據映射到圖形空間的視覺通道
- 繪制,繪制完成所有的圖形
更詳細的數據流程介紹和示例在后面的各類圖表中分別展示
更多
我們可以看到,在數據進行圖形映射的流程中,數據類型非常重要,不同的數據類型影響不同的映射方式,下一章節我們介紹數據分類和度量
G2 網站: https://g2.alipay.com/