Vega-Lite:交互式图形的语法 (Vega-Lite: A Grammar of Interactive Graphics)

Vega-Lite是一种高级语法。它支持简洁的json格式的语法,能够快速地定义交互式数据可视化。图1和图2的例子充分体现出Vega-Lite的简洁性。

sctterplot

图1 左图,散点图,支持鼠标悬停高亮元素;右图,用vega-lite实现的代码

scatterplot_vega图2 用vega实现图1的散点图

Vega-Lite是基于Vega[1]的高级语言。Vega-Lite的规范(specification)能够编译成Vega的规范。事实上,Vega-Lite的编译器解析JSON格式的规范之后,会将相关的规范处理成比较低级的Vega规范。

接下来,我将从图形绘制和交互定义两个角度介绍Vega-Lite的基本语法。

图形绘制方面,分为两个层面,单个视图的绘制和多视图的绘制。在Vega-Lite中,用Unit定义单个视图。Unit的定义是Unit := (data, transforms, mark-type, encodings)。图3,是一个简单的单视图例子。

 

unit

图3 用Vega-Lite实现堆垒条状图

在Unit的定义中,data用来说明数据的来源,支持JSON格式和CSV格式;transform定义了对原始输入的数据进行处理的操作规则。在图3中,我们从原始数据计算并生成新的属性gender;mark指定了可视化图形;encoding定义数据到可视化图形的映射规则。

Vega-Lite提供四种操作支持用户快速创建多个视图。Layer操作,基本定义是layer ([ unit1, unit2, …], resolve)。它支持将多个单视图重叠放置(如图4)。

layer

图4 采用layer操作实现柱状图和条形图的重叠视图

Concatenation操作能将多个单视图水平放置或垂直放置(如图5)。

concatenation

图5 采用concatenation操作实现两个单视图的垂直放置

Facet操作支持将多个单视图根据某种规则进行排布。在图6的例子中,两个条形图分别展示纽约和西雅图两个城市的温度和月份的关联关系。这两个视图的位置是由其location的数值决定。

facet

图6 采用facet操作实现视图的排布

Repeat操作能够以重用代码的方式,快速的创建多个视图(如图7)。

repeat

图7 采用repeat操作创建多个视图

在Vega-Lite的交互定义语法中,selection定义了输入的事件、感兴趣的元素以及选择函数,基本结构是Selection := (name, type, predicate, domain | range, event, init, transform, resolve)(如图8)。

select

图8 在散点图中定义点击选择事件

此外,Vega-Lite提供5中技术,支持用户对交互事件作用的数据进行操作。Project操作用于定义选择函数。在图9中,我们用project操作实现了一个选择事件。在这个选择事件中,一旦一个元素被选中,与该元素具有相同Origin的元素也会被选择。

project

图9 project操作定义新的选择事件。一旦一个元素被选择,与该元素有相同Origin的元素也会被选择

Toggle操作,输入值为布尔类型,主要用于改变交互的状态。默认值是true,表示按下shift键,可以在之前交互结果上,继续进行交互。比如,在图10的例子中,用户可以按下shift键,往选择好的元素列表中,添加新的元素。

toggle

图10 toggle操作改变交互状态。Toggle值为true时,用户可以按下shift键,在已选择的元素列表中,添加新的元素

Translate操作用于改变交互事件的判断。比如,brush操作和pan操作,从鼠标状态来看,都是鼠标按下、移动、放开。为了支持用户在同个视图中,既可以brush,又可以进行pan操作。在图11中,我们用translate结合shift键,对两种操作进行了区分。

translate

图11 用translate操作在同个视图中定义brush操作和pan操作

Zoom操作主要用户视图的缩放。Nearest操作,会将整个视图根据元素的位置分割成Voronoi图,然后将距当前交互的元素最近的元素选择出来。

以上介绍的project,toggle,translate,zoom和nearest操作可以进行随机的组合。同时,用户不需要定义操作之间的先后顺序。具体的顺序由编译器定义。

最后,针对被选择出来的元素,主要由三种处理方法。一是根据if-then-else,在encoding中改变被选择的元素的视觉映射(如图12)。此外,被选择出来的元素可以作为其他视图数据的输入。我们可以用这个方法实现视图之间的联动交互。最后,选择出来的数据可以用于定义新的尺度。图13的例子中,我们用选择出来的数据定义新的x轴尺寸。通过这个方式,我们可以方便实现overview + detail的交互模式。

select

图12 用if-then-else定义,被选择的元素将标注上它origin对应的颜色;未被选择的元素将用灰色标注

detail

图13 Overview + detail交互的实现

以上介绍的交互模式在单视图中,可以正常的工作。但在多视图中,往往会出现歧义。比如,在散点矩阵视图中,当用户在一个小矩阵中进行了brush操作,其他矩阵中相关元素应该如何响应呢?针对多视图中的交互,Vega-Lite定义了四种交互模式。我将根据图14的例子,详细的解释这四种交互模式。默认的single,表示当用户新brush一个区域时,之前的所有brush都会小时;independent表示,每个小视图中的brush时相互不影响的;union是求并的过程,在所有的视图中,元素只要被一个brush选中,就会被选中;intersect是求交视图,当前仅当元素被所有的brush选中时,才会被选中。

总的来说,Vega-Lite是一个基于Vega的高级语言,它支持用简洁的规范,快速定义数据的可视化和交互模式。但也由于该语言的高度简洁性,Vega-Lite不支持用户自定义新颖的交互方式,比如lasso操作,Vega-lite就不支持。

最后,我想简要的说明D3 [2]和Reactive Vega(最新版本的Vega)在性能上的差异。

图14表示D3和Reactive Vega在渲染动态数据上的性能差异。很显然,D3(紫色的线)在可视化初始化上,耗费比较少的时间。但是Reactive Vega(深绿色的线)在数据更新和重新渲染上,具有更高的刷新频率(frame rate)。这是因为,在初始化阶段,Vega需要解析JSON定义,但是D3不需要。而在数据更新阶段,Reactive Vega只处理变化的数据,但D3会对所有的数据进行处理。

streaming

图14 D3,Vega和Reactive Vega在可视化动态数据时,性能上的差异

图15分析的是D3,Vega和Reactive Vega在交互响应上的差异。我们可以发现,深绿色的线总是在紫色的线之上。这就表示基于Reactive Vega的可视化比基于D3的可视化具有更好的刷新频率。这主要是因为Reactive Vega只处理变化的数据,但D3会处理所有的数据。

interactive

图15 D3,Vega和Reactive Vega在交互响应上的差异

根据Jeffrey Heer的说法[3],D3是一个比较底层的语言,它具有比较好的表达性,能够支持用户实现各种新颖、复杂的的交互方式。Vega是一个比较高级的语言,支持用户快速的定义、实现常见的可视化和交互方式。此外,Vega在实现中,很大程度地依赖了D3。

简单的说,如果你想用已有的可视化方法,快速地探索、分析数据,个人觉得Vega-Lite是个不错的选择;但如果你要开发一个可视化系统,或实现新颖的可视化,个人觉得D3会是更好的选择。

以下是相关资料的链接:

D3 GitHub: https://github.com/d3/

Vega GitHub: https://vega.github.io/vega/

Vega-Lite GitHub: https://vega.github.io/vega-lite/

Editor:

http://vega.github.io/vega-editor/

https://vega.github.io/vega-editor/?mode=vega-lite

Reference:

[1] Satyanarayan A, Russell R, Hoffswell J, et al. Reactive vega: A streaming dataflow architecture for declarative interactive visualization[J]. IEEE transactions on visualization and computer graphics, 2016, 22(1): 659-668.

[2] Bostock M, Ogievetsky V, Heer J. D³ data-driven documents[J]. IEEE transactions on visualization and computer graphics, 2011, 17(12): 2301-2309.

[3] https://github.com/vega/vega/wiki/Vega-and-D3

评论关闭。