可视化框架设计-整体思路

整体思路

  • 可视化框架的构成
  • G2的框架结构
  • 数据图形映射的流程

可视化框架的构成

数据可视化的本质是:将数据映射到图形,同时将一些附加信息传达给用户。

一个可视化框架需要四部分: 
* 数据处理模块,对数据进行加工的模块,包括一些数据处理方法。例如:合并、分组、排序、过滤、计算统计信息等 
* 图形映射模块,将数据映射到图形视觉通道(后面章节介绍)的过程。例如:将数据映射成颜色、位置、大小等 
* 图形展示模块,决定使用何种图形来展示数据,点、线、面等图形标记 
* 辅助信息模块,用于说明视觉通道跟数据的映射关系,例如:坐标轴、图例、辅助文本等

G2的框架结构

G2实现了上面的四个模块,并且对着四个模块做了更进一步的细分:

image

这些细分的模块在单独的章节中各自介绍:

  • DataFrame 数据的处理模块,常见的数据处理方法
  • Stat 对数据进行统计的模块,min,max,mean等常见的统计
  • Scale 将数据映射到0-1之间,方便映射到视觉通道
  • Att,图形属性,数据映射到图形的视觉通道,包括位置、颜色、大小、形状等
  • Coord 展示图形需用到的坐标系,将数据映射到位置的视觉通道(属性)
  • View 视图,一个画布上可以显示多张图表,每个图表有各自的绘图区域、数据源、坐标系等信息
  • Geom 数据映射到的几何标识,G2中的几何标识有:点、线、路径、面积、多边形等
  • Shape更加细分的几何标识的图形,例如,点可以分为圆点、正方形、十字等,线可以分为点线、折线、曲线等
  • Axis 坐标轴,辅助用户识别图形所在的位置,判断数据大小的辅助元素
  • Legend 图例,辅助用户识别图形的大小、颜色、形状,通常用于判断数据对应图形的分类
  • Tooltip 提示信息,用户鼠标在画布上移动时,实时出现的鼠标附近的数据信息
  • Guide其他辅助元素,可以在图上添加辅助的文本、辅助图片、辅助线等,增强用户对图形的认知。

数据图形映射的流程

可视化从数据映射到图形需要以下流程:

image

  • 原始数据:加载到页面上的JSON数组
  • 统计分析:统计函数加工数据
  • 预处理数据:每个视图接收到的数据
  • 过滤:行过滤,列过滤(是否保存整条数据,后面讨论)
  • 关注数据: 对数据进行行列的过滤,当前图表关注的数据
  • 映射:将数据从数值域转换几何属性
  • 绘制:调用绘图库,绘制出图形
  • 图像数据:最终形成的图表

g2的数据映射流程

G2的数据映射到图形的过程整体上遵循这个流程,但是细节上有所增加:

image

几个大的流程:

  • 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
  • 数字化,将分类类型,时间类型的数据转换成数字,为了可以执行“数据调整”,调整图形在画布上的位置
  • 数据调整,为了更清晰的展示数据,图形有时候需要层叠、分组、散开等,此时需要对数据进行调整

    image 
    image

  • 训练度量度量包含了数据字段的信息,例如连续字段的最大值、最小值等信息,分类字段包含的分类,数据一旦进行调整,那么度量中的信息不再准确,所以需要进行度量的训练

  • 归一化,将数据的值映射到 0-1空间内,方便数据到视觉通道的映射
  • 计算图形需要的点,绘制图形时需要多个点,例如绘制一个柱状图,需要4个点,如果将坐标系转换,仍然是这4个点,仅仅是连接点的方式不同,就会生成不同的图表

    image 
    image

  • 映射,将数据映射到图形空间的视觉通道

  • 绘制,绘制完成所有的图形

更详细的数据流程介绍和示例在后面的各类图表中分别展示

更多

我们可以看到,在数据进行图形映射的流程中,数据类型非常重要,不同的数据类型影响不同的映射方式,下一章节我们介绍数据分类和度量

G2 网站: https://g2.alipay.com/

 
posted @ 2016-08-03 10:09  zaohe  阅读(3734)  评论(0编辑  收藏  举报