针对交互式数据可视化语法(Vega)的可视调试工具(Visual Debugging Techniques for Reactive Data Visualization)

Reactive Vega [1],是一种可视化领域专用,比D3更为高级的语法。它支持用户通过简洁的json,快速地定义交互式数据可视化。举个例子,图1-1绘制了一个散点图(如图1-3)。如果想在散点图中添加pan事件,可以通过signals关键词图1-2,定义事件以及事件触发时,相关数据的转化方式。相比于D3,在这里我们不需要定义事件的回调函数。这是因为Reactive Vega将事件当作数据流进行处理。当事件触发时,它会根据signals中定义的规则,重新计算相关的数据,并根据新的数据,重绘视图。

采用Reactive Vega定义交互式可视化,相当的简单方便。但是,它隐藏了数据具体的转化方式。同时,陈述式的语法形式模糊了数据之间的逻辑关系。这就导致Reactive Vega的调试,非常麻烦。常用的调试方法,比如断点查看,栈追踪等,在这里都发挥不了作用。为此,Hoffswell等人针对这种陈述式语法,提出了新的可视调试工具。

debugging1

图1 从左至右,从上至下,依次是1-1基于Reactive Vega定义静态的散点图;1-2通过signals在散点图中,添加drag事件;1-3散点图视图。

为更好地设计调试工具,他们采访了8位Vega用户,讨论他们在使用Vega创建静态可视化作品时,遇到的问题及可能的解决思路。根据参与者的反馈(图2),作者们总结得出了三个设计目标,分别是状态探查 (probe the state), 依赖关系展示 (visualize relationships)和数据转化检查(inspect transitions)。

debugging2

图2 左侧,Vega用户调试Vega代码的感受;右侧,作者们根据用户的反馈,总结的设计目标

根据这三个设计目标,他们实现了一个可视调试工具 [3](图3)。该工具会记录用户与可视化的交互过程,并展示相关数据的变化情况。用户可根据实际需要,回放这些交互;分析数据的变化与预想中的差距,发现出现转化错误的数据变量;追踪这些变量在代码中的位置,进一步查找代码层的错误。

 

debugging3图3 可视调试工具。(a) 代码区;(b) 可视化视图展示区;(c) 调试信息框;(d) 重放按钮;(e) 纵览视图,每个矩形块表示事件步(time step)。举行块的高度表示相关的signals数量;(f) 左列表是signal的名字,中间部分是每个signal在相应时间步的取值,右列表展示signal在被选择的时间步内的取值;(g)采用折线图,展示数据属性值随用户交互的变化趋势;(h) 数据列表,动态展示被选数据集内数据点的数值变化情况。

为阐述工具的有效性,他们研究了12个第一次使用Reactive Vega的参与者,要求参与者用该工具调试存在bug的交互式可视化作品。针对三个不同的设计目标,他们设计了相应的研究实验。在每个实验中,他们提供测试者一个存在bug的可交互可视化。用户被要求使用他们开发的工具找到出错的代码行。

我将通过一个实例,展示具体的实验过程。在这个实验中,他们提供了一个支持用户通过brush方式刷选数据点,并高亮被选数据点的散点图(图4)。如图4(d),他们定义了brush事件发生时,相关数据的转化规则。在第12行中,在名为scatterplot的signal中,用于转化brush选择区域的比例尺,初始化为空对象。具体的比例尺在鼠标mousedown时获取。这就导致,如果用户第一次与作品交互时,mousedown的区域是视图的空白区域,scatterplot singal将不能获取正确的比例尺,导致程序无法判断哪些数据点被选择,需要进行高亮处理。

在实验中,他们发现大部分用户会先与可视化作品交互,然后结合时间轴,分析散点图正常工作与非正常工作时,数据变量取值的差异。接着根据数据变量在代码中的位置,分析bug的位置。

整个实验,12个参与者中有9人准确地定位到出错的代码行。

debugging4

图4 验证工具有效性的实验之一。(a) 被刷选的数据点未被高亮;(b)散点图开始正常工作的时间片; (c) 刷选的数据点被高亮;(d)相关的代码。右侧3/12数据,表示12个参与者中有3位认为此行代码存在bug

另外两个实验,分别是在折线图中,查找数据变换规则中的bug;在支持zoom和pan的散点图中,分析zoom时,横坐标出错的问题。实验内容详见文章 [2]。

随后,他们根据参与者对工具中不同功能的排名,绘制了图5。该图表,清晰的展示不同的实验,相同的功能会有不同的排名;同个实验,不同的功能会有不同的排名。因此,功能的有效程度是跟用户需要分析的任务,紧密相关的。也存在一些功能,在几乎所有的任务中,都具有非常高的排名,比如时间轴和回放功能;另一些功能部件,比如注释框 (signal annotations)和属性值变化趋势(attribute Variability),在三个实验中,排名都相当的低。

debugging5

图5 展示调试工具不同功能部件在不同实验任务中的排名情况

总的来说,这个工作,根据使用者的使用需求,设计实现了针对Vega语法的可视调试工具。通过三个实验,他们分析了工具中功能部件的有效性。

References:

[1] Satyanarayan, Arvind, et al. “Reactive vega: A streaming dataflow architecture for declarative interactive visualization.” IEEE transactions on visualization and computer graphics 22.1 (2016): 659-668.

[2] Hoffswell, Jane, Arvind Satyanarayan, and Jeffrey Heer. “Visual debugging techniques for reactive data visualization.” Computer Graphics Forum. Vol. 35. No. 3. 2016.

[3] http://vega.github.io/vega-editor/

 

 

评论关闭。