Vega-Lite: A Grammar of Interactive Graphics

在 InfoVis 2016 上,UW 交互数据实验室 (opens in a new tab) 提出了一种新的交互数据可视化语法——Vega-Lite,获得了今年的 best paper,本文将根据其论文从多个角度介绍 Vega-Lite。论文地址 (opens in a new tab)。原文地址:https://geekplux.com/2016/11/02/vega-lite-a-grammar-of-interactive-graphics (opens in a new tab)

什么是 Vega-Lite

简而言之,Vega-Lite (opens in a new tab) 是一种数据可视化的高级语法,能够快速定义一些基本的交互式数据可视化。

如果你听说过 Vega (opens in a new tab),那么光看 Vega-Lite 的名字就不难想到它们的关系。Vega-Lite 就是编译成 Vega 的更高级图形语法。

如下图所示,只要右边寥寥数行代码,就能定义一个散点图:

为什么要提出 Vega-Lite

首先,Vega-Lite 的目标是:

以前的东西做不到吗?其实也不是做不到,只是在有些方面还有很大的提升空间,Vega-Lite 就是在这个方向上很大的一步棋:

为了实现以上的这些愿景,Vega-Lite 主要通过以下方式做出努力:

接下来说说它怎么具体实现上面这四个概念的。

Vega-Lite 的具体语法

可以从两个方面分开介绍,分别是图形方面和交互方面。

Vega-Lite 的具体语法——图形方面

View 视图

首先,Vega-Lite 定义一个图形为一个 Unit,所以 Unit 是 Vega-Lite 里图形的最小单位。Unit 的定义是:

unit := (data, transforms, mark-type, encodings)

可视化中视觉通道的设计非常重要,所以其中,encoding 是比较重要的。

encoding := (channel, field, data-type, value, functions, scale, guide)

每个 Unit 可以通过一些 operators 变成 View,而 View 又可以通过一些 operators 变成复合的 View。

所以可以这么理解,你每个 operator 的单位是一个视图(可以是 Unit,也可以是 View),而一个 operator 的输出又可以作为下一个 operator 的输入,进而可以形成一个嵌套视图。

Operators 操作

刚才提到了 operators,你可以把一个 operator 理解成该以何种方式来整合视图。Vega-Lite 一共提供了四种 operators,分别是 Layer、Concatenation、Facet、Repeat。

Layer

Layer 很好理解,就是字面意思,将每个 View 重叠;

layer([unit1, unit2, ...], resolve)

Concatenation

Concatenation 是将多个单视图水平放置或垂直放置;

hconcat([view1, view2, ...], resolve)
vconcat([view1, view2, ...], resolve)

Facet

Facet 是将多个单视图根据数据中的某个 field 进行排布;

facet(channel, data, field, view, scale, axis, resolve)

Repeat

Repeat 也很好理解,重复放置视图。

repeat(channel, values, scale, axis, view, resolve)

Vega-Lite 的具体语法——交互方面

任何交互中,选择一直是最重要的一个概念,所以 Vega-Lite 的所有交互也都围绕一个概念 —— Selection。首先看 Selection 的定义:

selection := (name, type, predicate, domain|range, event, init, transforms, resolve)

其中 transform 又最为重要,它定义了已选择之后的操作。这些操作可以进行随机的组合,且用户不需要定义操作之间的先后顺序,因为具体的顺序由编译器定义。

Vega-Lite 目前提供的交互操作一共有 5 种,分别是:project(fields, channels)、toggle(event)、translate(events, by)、zoom(event, factor)、nearest()。

Project

Project 用来重定义判定函数 predicate。

Toggle

Toggle 表示按下 shift 键,可以在之前交互结果上,继续进行交互。

Translate

Translate 用于改变交互事件的判断

Zoom 和 Nearest

其他交互

if-then-else

简单的条件判断逻辑。

把选择的数据作为另一个 view 的输入

上文也说到过,可以理解成视图的嵌套,也可以用作多视图协作。

根据选择的数据设置的比例尺

结合上一点,就可以把一个视图作为另一个视图的拓展。例如下图的 Overview + Detail 模式。

以上三个交互情形都支持与或非逻辑

多视图交互中的歧义

单视图中的交互,很可能在多视图中引发歧义。例如,在散点图矩阵中,如果在一个矩阵中进行 brush,其他的矩阵怎么配合协作?于是 Vega-Lite 又定义了四种交互协作模式,分别是 single、independent、union、intersect。

Vega-Lite 编译器

Vega-Lite 虽然也是用 JSON 写,但它可以编译成更低级的 Vega。其中它的编译器面临两个难点:

两个难点

四个步骤

编译器用四个步骤解决了以上两个难点。

Vega-Lite 局限性

Vega-Lite 目前虽然已经发布,但依旧在紧锣密鼓的开发,主要是因其现在还没有达到其理想的效果,在以下两方面还有局限性:

总结

可视化在时下越来越重要,越来越多的行业需要对数据进行展示,而可视化的专家又少之又少,所以很需要一款像 Vega-Lite 一样,简单,智能的系统快速地实现可视化。这可能是可视化工具未来发展的方向 —— 快速实现,快速替换可视化方案,快速展示,接下来再进行二次开发,进而多次迭代。

由此可见 Vega-Lite 前景很大,不过可能还需要再沉淀、开发一段时间,我们拭目以待吧。

参考文献