有求职需求的小伙伴，可以传送带直达...

本文是数据可视化原理与实践系列的第一篇，主要介绍《The Grammar of Graphics》中的图形语法，并以此为例说明图形语法灵活及结构简单的优势。

1 什么是图形语法

《The Grammar of Graphics》提供了基于面向对象的图形语法，来使用图表的各个部分构成一个图表。从面向对象的视角来看，图表是一系列对象构成的。当这些对象之间的消息符合图形语法，它们就会很灵活。 图形语法不是分类，而是一个形式系统。基于习惯性用法的分类缺乏对图表的深层理解，会让我们忽视图形领域的多样性，但是形式系统可以将我们从传统的限制中解放出来。

• 限制

但是基于图形语法的系统也并不是为了生产所有可以想象的图形而设计的，这个系统始终面临2个限制：

1. 外观和创意驱动的手绘：只能实现功能性和数据分析驱动的图表绘制，无法支持创意驱动的部分。
2. 无法实现所有图表：尽管图形语法允许我们实现很多图表，但是基于图形语法的系统毕竟还是个封闭系统，还是不能支持所有图表。

本节将以一个饼图的创建过程来介绍图形语法。下图给出了创建饼图的数据流，数据从数据源流入，经过一系列处理，形成一个图表，流入渲染器。图形语法不会关心渲染的细节（到底是渲染成图形，还是文字描述），只关心中间从数据到图表的处理流程。

假设需要可视化为饼图的数据是男性和女性对一个问卷问题的答案。这个问题是“您认为您所在领域的学术期刊的同行评审评审系统偏向于男性的频率是？”，回答这个问题的人只能从5个选项中选出自己的答案：几乎不（Rarely）、很少（Infrequently）、偶尔（Occasionally）、频繁（Frequently）、不确定（Not sure）。 假设问卷结果数据存在数据库里，即Source为数据库。图形语法会经过以下几步对数据进行处理：

1.1 创建变量

从数据库中取出数据，并赋值给一些变量。这里我们将回答问题者的性别赋值给变量Gender，将答案赋值给变量Response。

1.2 应用代数（Algebra）

图形代数由3个运算符（交叉、混合和嵌套）组成。由于创建变量时使用性别和答案创建了2个变量，在这一步需要将它们合并为一个变量，以使相同caseID的行能对应起来，这里使用交叉代数（cross）实现。

1.3 应用度量（Scale）

上面的结果中，Response和Gender都是分类型变量，这一环节需要将分类值数字化。可以使用任何转换方法来数字化分类型变量，如字母顺序、答案的相对频率，甚至可以用字符串长度。这里我们使用相对频率，将Rarely映射为1，Infrequently映射为2，Occasionally映射为3，Frequently映射为4，Not Sure映射为5（Not Sure不可比较，所以随机放在最后）。对于性别，使用字母顺序，将Female映射为1，Male映射为2。映射结果为下表。

1.4 计算统计值

本图形语法系统会为变量集的每行生成一个图形元素，如果直接使用上面得到的数据来绘制饼图，绘制出来的饼图会有3835份，完全没有意义。为了让绘制出来的图表有意义，需要对数据进行统计。饼图上的每一份表示某个类别的整体比例，因此可以按列进行聚合，得到每个分类值的整体比例。将相同Gender的相同Response聚合起来，得到下表的结果。

1.5 构造几何图形

图形语法有各种不同的几何图形操作。这里将使用区间图来绘制饼图。区间图（可以用interval()函数获得）将一个区间转换为一个（通常为矩形）几何对象，其长度与区间成比例，宽度为非零（通常为常数）。但是上面的表中Summary只是一个点，只有一个点如何构造区间呢？Grammar of Graphics这本书中的图形语法使用的约定是，如果区间图只接收到一个点的数据，它将自动使用0作为下界，构造出一个区间。这种约定源于普通用法中，条形图如非指定明确下界，通常从0开始。接下来需要将构造出来的区间堆叠（可以用修饰方法stack获得）起来。堆叠的作用是对区间进行累加，每个区间都以前一个区间的上限为下限开始累加。通过堆叠区间图的方法得到的变量集如下表所示。

1.6 应用坐标

为了绘制饼图，需要对上面的几何图形应用极坐标变换，将(x, y)转换为(r, theta)。x方向的堆叠转换为扇形边的堆叠，y方向的长度转换为扇形的角度。转换结果如下。 坐标操作越靠后进行，我们的系统就会越灵活，因为前面相同的代码，通过应用不同的坐标系，就可以生成条图或者饼图。

1.7 计算美学属性（Aesthetics）

至此我们已经创建了一个图，但是图是一个数学抽象，我们无法感知数学抽象。因此，我们必须赋予这种抽象的可接受的形式，通过美学函数将图转化为图形。这里使用3个美学函数（position、color和label）： a. position：输入是上面极坐标变化结果的区域，输出是屏幕坐标。 b. color：输入是Response的所有可能值，输出是颜色值。 c. label：输入是Response的所有可能值，输出是Response文本。 每个美学函数的输出都是对渲染器的一组绘图指令。position的结果将图形的顶点转换为渲染器坐标系统的像素；color的结果生成颜色表的索引；label的结果将字符串与值进行关联。

1.8 正式规范

下图给出了上述饼图的一种渲染结果，以及这两个饼图的正式规范。规范中：

• DATA：从数据到变量的操作，表示将数据字段Response和Gender分别赋值给变量response和gender
• SCALE：度量变换，表示将分类型变量response和gender数字化。
• COORD：应用坐标系统，表示对变量gender应用直角坐标系，使两个饼图横向排列；对response应用极坐标系，绘制饼图。
• ELEMENT：构造几何图形并应用美学属性。使用summary.proportion聚合相同gender下的相同response，使用interval.stack构造堆叠区间图形，使用label和color分别设置图形的文本和颜色。

2 为什么需要图形语法

图形语法不关注图表类型，而关注构成图表的各个部分。任何图表都可以看作这些部分的组合。基于图形语法的可视化库有几个好处：

1. 包含更多图表类型：一旦我们理解了饼图是极坐标中的条形，我们就可以构造其他更少见的极坐标图形（因为可以将其他图形和极坐标组合起来）。如果以图表类型（柱图、线图、饼图）为粒度，得为每种图表类型单独开发一套代码，出于成本考虑可能就不会支持更少见的图表。
2. 代码结构不会过于复杂：以图表的构成部分，如坐标系、图形，为粒度，便于复用这些构成部分的代码。如果以图表类型为粒度，为每种图表类型单独开发一套代码，可能只有一些处理逻辑是可复用的，代码会更加复杂。

可视化引擎G2是典型的基于图形语法的可视化库，对比一图一画的ECharts和G2对于“饼图”的实现：

• ECharts：通过设置 type为"pie" 来决定图形类型是饼图
• G2：通过设置 几何图形为堆叠区间图interval.stack + 坐标系为极坐标系polar.theta 来决定图形类型是饼图

可以看出，ECharts的使用确实会简单易懂，但是需要为柱状图定义type="bar"的配置和实现，为漏斗图定义type="funnel"的配置和实现。而G2以图形语法为理论基础，所有的图表都是几何图形、坐标系、数据调整等元素的排列组合。G2中饼图、柱状图和漏斗图都有相同的几何图形，只不过柱状图的坐标系是直角坐标系，饼图的坐标系是极坐标系，漏斗图需要对图形做对称调整。因此，使用G2只用修改几处配置就能实现柱状图、饼图和漏斗图之间的转换。

图表是其构成部分的排列组合，这种特性允许图形语法系统实现最大化的代码复用，和对一些少见图表的低成本支持。

了解图形语法有助于理解和快速上手基于图形语法的可视化工具，本系列的下一篇文章《数据可视化原理与实践 - G2原理初探》将介绍G2的基本使用及图形语法在G2中的实现。

团队招聘

    我们是快手数平前端团队，主要负责快手大数据平台中从采集，加工，消费整条链路相关产品的前端建设工作，涉及到生产、分析、流量、AB、专题等多个领域，目标是建设更自助，更快速，更先进的数据产品。

来到这里你能接触到：

1. 快手数据平台是如何通过先进技术支持起 EB 级别数据量的；
2. 日均百亿级别的日志上报的埋点基础设施的是如何设计与迭代的；
3. 超过百万代码量的独立项目带来的工程化挑战；
4. 2D/3D可视化、在线编辑器、电子表格等细分领域的探索；
5. 自研工具产品来提升团队效率，用数据来说话；
6. ......

我们希望你能：

1. 有坚实的计算机/前端基础，不只是 MVVM 工程师；
2. 有一定的 B 端项目/可视化相关的经验更佳，或非常热爱；
3. 能发现问题，分析问题，并解决问题；
4. 敢于创新，善于沟通，时刻关注前沿技术；
5. 【加分项】有一定产品/交互/设计 sense；
6. 【加分项】开源项目/社区；

团队氛围：

1. 来这里你能接触到大数据中各个领域的专家，大家都非常 nice，没有架子，随时坦诚沟通，互相学习；
2. 技术很重要，业务更重要，定期的培训分享都少不了；
3. 团队氛围融洽，就事论事，风清气正，拒绝勾心斗角；
4. 团队年轻有活力，既要工作好，也要玩的好； 加入我们，一起做点好玩的！

感兴趣的同学，欢迎投寄简历： luominxianglmx@outlook.com