可视化框架设计-数据流

• 简介
• 数据流示例
• 更多

简介

在整体思路章节中我们讲解过可视化整体的数据流程和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