可視化框架設計-數據流

• 簡介
• 數據流示例
• 更多

簡介

在總體思路章節中咱們講解過可視化總體的數據流程和G2的數據流程，本章以最簡單的點圖和柱狀圖爲示例展現每一步數據是如何轉變的。

回顧G2的數據流程：

注意：

• 統計函數能夠嵌入到語法中，因此也須要解釋統計函數如何影響數據變化

數據流示例

咱們以最簡單的月份、天氣、城市的數據爲例解釋數據如何發生數據圖形映射，如何繪製的。

假設 500*500的圖表繪製區域

原始數據

month	temp	city	year
1月	5	北京	2001
2月	10	北京	2001
1月	8	南京	2003
2月	14	南京	2004

點圖示例

設置數據源

chart.source(data);

設置語法

chart.point().position('month*temp').color('city',['red','blue']) 

• 將month映射到position的水平（x軸）方向
• 將temp映射到position的垂直（y軸）方向
• 將city映射到color

過濾數據列

建立圖表須要的數據，僅保留參與圖形語法的字段

month	temp	city
1月	5	北京
2月	10	北京
1月	8	南京
2月	14	南京

• 本示例中year字段未在語法中出現，因此過濾掉

統計函數執行

無統計函數，因此不執行統計函數

保存原始數據

此時將原始數據保存下來，方便後期tooltip取對應的數據

month	temp	city	origin
1月	5	北京	{month: '1月',temp: 5,city: '北京'}
2月	10	北京	{...}

month	temp	city	origin
1月	8	南京	{month: '1月',temp: 8,city: '南京'}
2月	14	南京	{...}

轉換成數字

分類類型month,city都轉換成數字

month	temp	city	origin
0	5	0	{month: '1月',temp: 5,city: '北京'}
1	10	0	{...}

month	temp	city	origin
0	8	1	{month: '1月',temp: 8,city: '南京'}
1	14	1	{...}

調整數據

無調整

數據歸一化

• 因爲月份Month是分類類型，又決定x軸的位置，因爲分類類型，須要在座標軸2端留下空白，因此數據歸一化後的分佈範圍是[0.25-0.75]
• city是分類類型，可是不參與位置運算，因此分佈範圍是[0-1]
• temp是數字類型，爲了讓用戶易於理解，座標軸上的點是： [0,5,10,15,20],Min: 0,max: 20

month	temp	city	origin
0.25	0.25	0	{month: '1月',temp: 5,city: '北京'}
0.75	0.5	0	{...}

month	temp	city	origin
0.25	0.4	1	{month: '1月',temp: 8,city: '南京'}
0.75	0.7	1	{...}

計算圖形生成須要的點

month	temp	city	origin
[0.25]	[0.25]	0	{month: '1月',temp: 5,city: '北京'}
[0.75]	[0.5]	0	{...}

month	temp	city	origin
[0.25]	[0.4]	1	{month: '1月',temp: 8,city: '南京'}
[0.75]	[0.7]	1	{...}

圖形屬性映射

因爲y軸的方向是從下往上，因此 0.1 轉換成畫布座標是 500 - 500 * 0.1

x	y	color	origin
[125]	[375]	red	{month: '1月',temp: 5,city: '北京'}
[375]	[250]	red	{...}

x	y	color	origin
[125]	[300]	blue	{month: '1月',temp: 8,city: '南京'}
[375]	[150]	blue	{...}

最後結果：

柱狀圖示例

interval 最簡單的數據轉化過程

語法

chart.interval().position('month*temp').color('city',['red','blue']) 

建立圖表須要的數據

僅保留參與圖形語法的字段

month	temp	city
1月	5	北京
2月	10	北京
1月	8	南京
2月	14	南京

對數據分組

因爲color屬性對應的字段city是分類類型，因此對數據進行分組

month	temp	city
1月	5	北京
2月	10	北京

month	temp	city
1月	8	南京
2月	14	南京

統計函數執行

無統計函數，因此不執行統計函數

保存原始數據

month	temp	city	origin
1月	5	北京	{month: '1月',temp: 5,city: '北京'}
2月	10	北京	{...}

month	temp	city	origin
1月	8	南京	{month: '1月',temp: 8,city: '南京'}
2月	14	南京	{...}

轉換成數字

分類類型month,city都轉換成數字

month	temp	city	origin
0	5	0	{month: '1月',temp: 5,city: '北京'}
1	10	0	{...}

month	temp	city	origin
0	8	1	{month: '1月',temp: 8,city: '南京'}
1	14	1	{...}

調整數據

無調整

數據歸一化

• 因爲月份Month是分類類型，又決定x軸的位置，因爲分類類型，須要在座標軸2端留下空白，因此數據歸一化後的分佈範圍是[0.25-0.75]
• city是分類類型，可是不參與位置運算，因此分佈範圍是[0-1]
• temp是數字類型，爲了讓用戶易於理解，座標軸上的點是： [0,5,10,15,20],Min: 0,max: 20

month	temp	city	origin
0.25	0.25	0	{month: '1月',temp: 5,city: '北京'}
0.75	0.5	0	{...}

month	temp	city	origin
0.25	0.4	1	{month: '1月',temp: 8,city: '南京'}
0.75	0.7	1	{...}

計算圖形生成須要的點

• 因爲區域圖須要跟x軸造成閉合的區間,又是一個矩形，因此每一個點會生成4個點
• 柱狀圖的寬度，若是未指定size,則須要計算默認矩形的寬度，在這個示例，寬度 = 1/2/2 = 0.25,那麼柱狀圖的x軸須要生成 x - 0.25/2 和 x + 0.25/2的2個點
• 最終生成的圖形是：

  4-3 | | 1-2 

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0,0,0.25,0.25]	0	{month: '1月',temp: 5,city: '北京'}
[0.625,0.875,0.75,0.875]	[0,0,0.5,0.5]	0	{...}

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0,0,0.4,0.4]	1	{month: '1月',temp: 8,city: '南京'}
[0.625,0.875,0.75,0.875]	[0,0,0.7,0.7]	1	{...}

圖形屬性映射

因爲y軸的方向是從下往上，因此 0.1 轉換成畫布座標是 500 - 500 * 0.1

x	y	color	origin
[62.5,187.5,62.5,187.5]	[500,500,375,375]	red	{month: '1月',temp: 5,city: '北京'}
[375,375]	[500,500,250,250]	red	{...}

x	y	color	origin
[62.5,187.5,62.5,187.5]	[500,500,300,300]	blue	{month: '1月',temp: 8,city: '南京'}
[312.5,437.5,312.5,437.5]	[500,500,150,150]	blue	{...}

執行結果

• 此時不一樣城市相同月份的柱狀圖被遮擋了，因此僅顯示了2條數據，能夠經過層疊或者分組調整數據

柱狀圖層疊

語法

chart.intervalStack().position('month*temp').color('city',['red','blue']) 

建立圖表須要的數據

僅保留參與圖形語法的字段

month	temp	city
1月	5	北京
2月	10	北京
1月	8	南京
2月	14	南京

對數據分組

因爲color屬性對應的字段city是分類類型，因此對數據進行分組

month	temp	city
1月	5	北京
2月	10	北京

month	temp	city
1月	8	南京
2月	14	南京

統計函數執行

無統計函數，因此不執行統計函數

保存原始數據

month	temp	city	origin
1月	5	北京	{month: '1月',temp: 5,city: '北京'}
2月	10	北京	{...}

month	temp	city	origin
1月	8	南京	{month: '1月',temp: 8,city: '南京'}
2月	14	南京	{...}

轉換成數字

分類類型month,city都轉換成數字

month	temp	city	origin
0	5	0	{month: '1月',temp: 5,city: '北京'}
1	10	0	{...}

month	temp	city	origin
0	8	1	{month: '1月',temp: 8,city: '南京'}
1	14	1	{...}

調整數據

由於interval存在 stack，因此須要對temp的數據進行層疊調整

month	temp	city	origin
0	[0,5]	0	{month: '1月',temp: 5,city: '北京'}
1	[0,10]	0	{...}

month	temp	city	origin
0	[5,13]	1	{month: '1月',temp: 8,city: '南京'}
1	[10,24]	1	{...}

數據歸一化

• 因爲月份Month是分類類型，又決定x軸的位置，因爲分類類型，須要在座標軸2端留下空白，因此數據歸一化後的分佈範圍是[0.25-0.75]
• city是分類類型，可是不參與位置運算，因此分佈範圍是[0-1]
• temp是數字類型，爲了讓用戶易於理解,同時數據進行層疊處理後，座標軸上的點是： [0,5,10,15,20,25],Min: 0,max: 25

month	temp	city	origin
0.25	[0,0.2]	0	{month: '1月',temp: 5,city: '北京'}
0.75	[0,0.4]	0	{...}

month	temp	city	origin
0.25	[0.2,0.52]	1	{month: '1月',temp: 8,city: '南京'}
0.75	[0.4,24/25]	1	{...}

計算圖形生成須要的點

• 因爲區域圖須要跟x軸造成閉合的區間,又是一個矩形，因此每一個點會生成4個點
• 柱狀圖的寬度，若是未指定size,則須要計算默認矩形的寬度，在這個示例，寬度 = 1/2/2 = 0.25,那麼柱狀圖的x軸須要生成 x - 0.25/2 和 x + 0.25/2的2個點
• 最終生成的圖形是：

  4-3 | | 1-2 

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0,0,0.2,0.2]	0	{month: '1月',temp: 5,city: '北京'}
[0.625,0.875,0.75,0.875]	[0,0,0.4,0.4]	0	{...}

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0.2,0.2,0.52,0.52]	1	{month: '1月',temp: 8,city: '南京'}
[0.625,0.875,0.75,0.875]	[0.4,0.4,24/25,24/25]	1	{...}

圖形屬性映射

因爲y軸的方向是從下往上，因此 0.1 轉換成畫布座標是 500 - 500 * 0.1

x	y	color	origin
[62.5,187.5,62.5,187.5]	[500,500,400,400]	red	{month: '1月',temp: 5,city: '北京'}
[375,375]	[500,500,300,300]	red	{...}

x	y	color	origin
[62.5,187.5,62.5,187.5]	[400,400,260,260]	blue	{month: '1月',temp: 8,city: '南京'}
[312.5,437.5,312.5,437.5]	[300,300,20,20]	blue	{...}

結果

柱狀圖的分組

語法

chart.interval().position('month*temp').color('city',['red','blue']) 

建立圖表須要的數據

僅保留參與圖形語法的字段

month	temp	city
1月	5	北京
2月	10	北京
1月	8	南京
2月	14	南京

對數據分組

因爲color屬性對應的字段city是分類類型，因此對數據進行分組

month	temp	city
1月	5	北京
2月	10	北京

month	temp	city
1月	8	南京
2月	14	南京

統計函數執行

無統計函數，因此不執行統計函數

保存原始數據

month	temp	city	origin
1月	5	北京	{month: '1月',temp: 5,city: '北京'}
2月	10	北京	{...}

month	temp	city	origin
1月	8	南京	{month: '1月',temp: 8,city: '南京'}
2月	14	南京	{...}

轉換成數字

分類類型month,city都轉換成數字

month	temp	city	origin
0	5	0	{month: '1月',temp: 5,city: '北京'}
1	10	0	{...}

month	temp	city	origin
0	8	1	{month: '1月',temp: 8,city: '南京'}
1	14	1	{...}

調整數據

無調整

數據歸一化

• 因爲月份Month是分類類型，又決定x軸的位置，因爲分類類型，須要在座標軸2端留下空白，因此數據歸一化後的分佈範圍是[0.25-0.75]
• city是分類類型，可是不參與位置運算，因此分佈範圍是[0-1]
• temp是數字類型，爲了讓用戶易於理解，座標軸上的點是： [0,5,10,15,20],Min: 0,max: 20

month	temp	city	origin
0.25	0.25	0	{month: '1月',temp: 5,city: '北京'}
0.75	0.5	0	{...}

month	temp	city	origin
0.25	0.4	1	{month: '1月',temp: 8,city: '南京'}
0.75	0.7	1	{...}

計算圖形生成須要的點

• 因爲區域圖須要跟x軸造成閉合的區間,又是一個矩形，因此每一個點會生成4個點
• 柱狀圖的寬度，若是未指定size,則須要計算默認矩形的寬度，在這個示例，寬度 = 1/2/2 = 0.25,那麼柱狀圖的x軸須要生成 x - 0.25/2 和 x + 0.25/2的2個點
• 最終生成的圖形是：

  4-3 | | 1-2 

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0,0,0.25,0.25]	0	{month: '1月',temp: 5,city: '北京'}
[0.625,0.875,0.75,0.875]	[0,0,0.5,0.5]	0	{...}

month	temp	city	origin
[0.125,0.375,0.125,0.375]	[0,0,0.4,0.4]	1	{month: '1月',temp: 8,city: '南京'}
[0.625,0.875,0.75,0.875]	[0,0,0.7,0.7]	1	{...}

圖形屬性映射

因爲y軸的方向是從下往上，因此 0.1 轉換成畫布座標是 500 - 500 * 0.1

x	y	color	origin
[62.5,187.5,62.5,187.5]	[500,500,375,375]	red	{month: '1月',temp: 5,city: '北京'}
[375,375]	[500,500,250,250]	red	{...}

x	y	color	origin
[62.5,187.5,62.5,187.5]	[500,500,300,300]	blue	{month: '1月',temp: 8,city: '南京'}
[312.5,437.5,312.5,437.5]	[500,500,150,150]	blue	{...}

執行結果

更多

本章僅僅以點圖和柱狀圖爲例介紹了G2在處理數據視覺通道映射的過程當中的數據流程，不一樣的圖表的差別主要在於圖形生成須要的點，更多的詳細信息查看各個圖表類型所在的章節。下一章咱們開始進入圖形類型的介紹

 

G2: https://g2.alipay.com