不得不说Antv G2的图形语法还挺清晰的~

数据可视化,将不可见或难以直接显示的数据转化为可感知的图形,增强数据识别效率,传递有效信息。可以简单理解为,是将数据映射为视觉元素。

聊到数据可视化,我们往往想到的是各式各样图表,它们看着各有不同,但是又有规律可循。

1. 图形语法

以Antv G2图表为例,其背后的一套图形语法所支撑的,它基于《The Grammar of Graphics》一书,是一套用来描述所有统计图形深层特性的语法规则,该语法回答了『什么是统计图形』这一问题。

在 G2 中,通常这么描述一张图表:一个图表就是从数据到几何标记对象的图形属性的一个映射,此外图形中还可能包含数据的统计变换,最后绘制在某个特定的坐标系中。过程如下:

  • Data

原始数据

  • Trans 转换

将原始数据转换为要可视化的数据,如过滤、排序、数据聚合、分组、归一化等操作

  • Scale 比例尺

将数据转化为图形的视觉属性数据,如长度、高度、分组范围等

  • Coordinate 坐标系

将数据(点)转化成画布坐标系的点,如笛卡尔坐标系、极坐标系

  • Element 图形元素

绘制在图表中实际看到的图形元素,如点、线、多边形等,不同的图形可拼装成条形图、散点图、折线图、面积图

  • Guide 辅助元素

为了增强图表的可读性和可理解性,增加坐标轴、图例、提示信息等辅助元素;

const chart = new G2.Chart({
  container: 'id' // 指定图表容器,可以是 DomNode,也可以是 id
})
chart.source(dv)                 // 载入数据
chart.axis(false)                // 不显示坐标轴
chart.coord('polar').transpose() // 坐标转换
chart.intervalStack()            // interval 类型的 element,做堆叠处理
  .position('1*percent')         // 位置映射
  .color('k')                    // 颜色映射
chart.render() // 渲染图表

2. 绘制图表

假设现在有一份原始数据:

const data = [
  { month: '一月', temperature: 5, city: '北京' },
  { month: '二月', temperature: 10, city: '北京' },
  { month: '一月', temperature: 8, city: '南京' },
  { month: '二月', temperature: 14, city: '南京' }
];

为了绘制成这个效果

我们需要将数据从一个特定的范围映射到另一个特定的范围,映射成需要的数据,如大小,颜色,刻度。

根据数据的自然分类,需要将每种分类设计成不同的度量。

如:一月,二月的时间刻度,需要对时间做排序,转换成有序的坐标点;

如:北京、南京的名词,则需要转换成颜色,用来显示分类;

month – x轴坐标 temperature – y轴坐标 city – 颜色分类 origin data
1 5 ‘#1890FF’ {month: ‘一月’,temperature: 5,city: ‘北京’}
2 10 ‘#1890FF’ {“month”:”二月”,”temperature”:10,”city”:”北京”}
1 8 ‘#2FC25B’ {“month”:”一月”,”temperature”:8,”city”:”南京”}
2 14 ‘#2FC25B’ {“month”:”二月”,”temperature”:14,”city”:”南京”}

3. 坐标系 Coordinate

处理后的数据需要映射到空间的位置上,我们将这个空间定义成坐标系。一般分为直角坐标系和极坐标系:

  • 直角坐标系

将 0-1 区间内的数据映射到画布空间;

  • 极坐标系

将画布空间的数据,翻转回 0-1 的范围内。

在图表中识别度最高的特征是位置 (position)。坐标系会根据画布的位置和大小,将数据转换成画布坐标。这个处理过程本质上是一个函数,输入的是原始数据,输出是变换后点的坐标。

// 直角坐标系:缩放
function scale(sx = 1, sy = 1) {
  return ([px, py]) => [px * sx, py * sy]
}

// 直角坐标系:转置
function transpose(){
  return ([px, py]) => [py, px]
}

// 极坐标变换
function polar() {
   return ([theta, radius]) => {
        const x = radius * Math.cos(theta)
        const y = radius * Math.sin(theta)
        return [x, y]
   }
}

4. 几何图形 Geometry

计算出了绘制在画布上的点坐标后,下面需要将数据绘制到画布上。我们将绘制出来的几何图形定义为图表类型。

根据几何图形可以代表的数据维度来划分,可以分为:

  • 零维,点是常见的零维几何标记,点仅有位置信息
  • 一维,常见的一维几何标记有线
  • 二维,二维平面
  • 三维,常见的立方体、圆柱体都是三维的几何标记

光从数据维度来分,就可以分为点图,线图,区域图。其中,点图可以使用圆点,三角形,正方形;线图可以有折线,曲线,点线。不同的几何图形,又可以衍生出了各式各样的图表类型。

5. 辅助组件

除了绘制几何图形外,一些基本的辅助组件可以帮助我们理解图表,如坐标轴(Axis), 图例(Legend)和标注(Annotation)。

6.绘制渲染

有了上面这些元素,再使用canvas或者svg将图表绘制出来就可以了。

参考资料

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容