Vega-Lite:交互式可视化生成语法

sdq
Explore, Think, Create
4 min readNov 27, 2019

Vega-Lite [1]是2017年InfoVis的最佳论文,它基于底层可视化语法Vega进行上层封装,提出了一套能够快速构建交互式可视化的高阶语法。相比于其它比较底层可视化语法,Vega-Lite可以通过几行JSON配置代码即可完成一些通用的图表创建,而相反地,想要用D3等去构建一个基础的统计图表则可能需要写好几十行代码,如果涉及到交互的话代码量更是会大大增加。

Vega-Lite不同于传统的可视化模版,而是使用组合的方式来更灵活地生成图表。其配置语法的基础部分主要由四部分构成:数据(data), 转换(transforms), 标记类型(mark-type), 和编码(encodings)。其中数据是指图表的原始数据;转换是对于数据本身的过滤操作;标记类型是指可视化中使用的标记,如点、线、柱等;编码则是数据的可视化编码方式,如位置、颜色、大小等。这样的组合方法大大增强了图表的灵活性,在切换不同标记类型进行调优时也非常方便。下图是使用Vega-Lite来可视化天气数据集,展示了不同的标记类型和数据转换。

图1 Vega-Lite图表语法示例

除了生成单个图表,Vega-Lite也可以通过层级或拼接的方式支持生成多个相关的图表组合。比如下图(a)中对于折线图和柱状图的组合以及下图(b)中垂直拼接了一个折线图和一个散点图。该组合的配置方式也非常便捷,可以通过不同方式来组合图表。

图2 Vega-Lite图表组合语法示例

Vega-Lite的最重要特性是支持交互语法,可视化交互的开发往往是最耗时费力的,而在Vega-Lite中也可以通过配置项进行生成。其交互语法的核心是对象选择(Selection),在设置完选择参数后,Vega-Lite可以提供单个元素的点选或区域选择,并支持区域的缩放或平移,图表会实时标示出用户的选择区域。此外,交互功能可以与上述的图表组合功能是可以联通的,用户的交互在多个图表之间可以进行联动,从而实现数据的交互式探索。如图3所示,多个散点图可通过不一样的笔刷(Brush)方式来实现数据展示的联动。

图3 Vega-Lite交互语法示例

Vega-Lite这类高阶可视化生成语法大大降低了普通用户制作交互式可视化的门槛,此外其灵活的组合式语法也可以有效帮助设计和研究人员快速遍历可视化的设计空间,优化不同数据的可视化设计方式。基于Vega-Lite也有一些比较完善的可视化分析工具,比如探索式分析工具Voyager和类似Tableau的可视化分析工具Polestar。目前,Vega-Lite的所有代码均已开源[2]。

图4 Voyager和Polestar

[1] Satyanarayan A, Moritz D, Wongsuphasawat K, et al. Vega-lite: A grammar of interactive graphics[J]. IEEE transactions on visualization and computer graphics, 2016, 23(1): 341–350.

[2] https://vega.github.io/vega-lite

--

--