动画 Vega-Lite：用

交互式图形语法统一动画

摘要

我们提出了 Animated Vega-Lite，这是 Vega-Lite 的一组扩展，可将动画可视化建模为时变数据查询。 与指定动画可视化的替代方法（注重高度表现力的设计空间）相比，Animated Vega-Lite 优先考虑将动画与该语言现有的静态和交互式可视化抽象统一起来，使作者能够在这些模式之间平滑地移动或组合。 因此，为了用静态可视化组合动画，我们将时间表示为编码通道。 时间编码将数据字段映射到动画关键帧，为无需交互的动画提供轻量级规范。 为了组合动画和交互，我们还将时间表示为事件流； Vega-Lite 选择提供动态数据查询，现在不仅由输入事件驱动，还由计时器滴答驱动。 我们通过一系列不同的示例来评估我们方法的表现力，这些示例展示了交互和动画分类法的覆盖范围。 我们还通过采访现有动画语法的五位专家开发人员，批判性地反思了我们贡献的概念可供性和局限性。 这些反思强调了野外示例的关键激励作用，并确定了三个核心权衡：语言设计过程、支持的动画过渡类型以及系统如何建模关键帧。

介绍

快速原型制作对于可视化创作过程至关重要。 在制作解释性图形时，快速原型制作允许可视化作者在致力于详细改进设计之前评估候选设计。 对于探索性数据分析，快速原型制作同样重要，因为可视化只是更广泛工作流程的一部分，分析师专注于生成和分析图表以产生洞察或进行进一步分析。 然而，考虑可视化分面数据的摩擦：作者可能会选择将分面描绘为小倍数显示、通过交互按需（例如动态查询小部件）或通过动画顺序播放。 这些设计在时间和空间之间做出了不同的权衡，因此，研究结果表明它们为读者提供了不同程度的清晰度、时间投入和视觉兴趣[33]。 尽管存在这些差异，这些设计表达了一个共同的目标——可视化不同的数据分组——并且可视化作者可能合理地期望能够在三者之间轻松移动以做出最合适的选择。

不幸的是，现有的可视化工具包在处理这种时空权衡时可能会呈现高度粘性的[44]规范过程。 一类工具包支持交互或动画，但不能同时支持两者。 此类系统包括 Vega [38] 和 Vega-Lite [36] - 它们以信号和选择的形式提供交互原语 但不提供动画抽象 - 以及 gganimate [43]、Data Animator [46]、Canis / CAST [10, 9 ] 和 Gemini/Gemini² [19, 20] — 根据称为 关键帧 的离散可视化状态之间的转换来表达动画t9>但不提供交互处理。 因此，这些系统迫使可视化作者在选择原型工具时过早地将[44]提交给交互或动画友好的抽象，从而限制了作者探索替代设计的能力。 第二类工具包（包括 D3 [3] 和 Plotly [1])支持这两种模式，但通过很大程度上不同的抽象（即 transitions或帧用于动画，以及事件处理程序或交互技术的类型。 因此，作者必须经常重组或重写他们的规范，以并行考虑交互和动画。

在本文中，我们介绍了 Animated Vega-Lite：对 Vega-Lite 的扩展以支持数据驱动的动画。 其设计的动机是交互和动画是平行概念(section 2)。 交互会根据用户输入来转换数据（例如过滤）并更新视觉属性（例如重新着色标记），而动画会根据计时器执行相同的操作。 从这个角度来看，交互式和动画可视化技术占据了一系列动态的、事件驱动的行为。 因此，通过 Animated Vega-Lite，动画可视化（就像它们的交互式对应物一样）被建模为随时间变化的数据查询——这种方法允许我们为静态、交互式和动态数据提供一组统一的抽象。动画可视化。

动画 Vega-Lite 提供两种时间抽象，允许动画与 Vega-Lite 现有的静态和交互式可视化语法组合(section 3)。 从交互的角度来看，时间是一个事件流：类似于用户产生的点击和按键的事件源。 这些事件驱动 Vega-Lite 选择，将动态数据查询应用于视觉编码。 因此，通过将时间建模为事件流，用户可以在同一规范中无缝指定交互式和动画行为并在其之间移动。 从Vega-Lite图形语法的角度来看，时间是一个编码通道。 正如 x 和 y 编码将数据值映射到以像素为单位测量的空间位置一样，time 编码将数据值映射到以经过的毫秒为单位测量的时间位置。 与事件流抽象相比，编码通道抽象更轻量级，但表达能力较差。 这使得可视化作者可以快速开始使用动画图表，并通过切换行或的时间通道，在动画和分面可视化之间轻松切换第一栏。 而且，为了增加可定制性，用户始终可以将时间作为编码规范转变为时间作为事件流规范。

我们实现了一个原型编译器，它综合了低级 Vega 规范以及用于交互和动画的共享反应逻辑(section 4)。 遵循最佳实践[32]，我们通过多种评估方法评估我们的贡献。 通过多样化的示例库(section 5)，我们证明 Animated Vega-Lite 涵盖了 Yi 等人的大部分交互分类[51] 以及 Heer & Robertson 的动画分类[12]，同时保留Vega-Lite的低粘度和系统生成性。 我们还采访了四种现有动画可视化语法 [42, 46, 10, 9, 19, 20] 的五位专家开发人员，以批判性地反思 [35] 在权衡、概念我们系统的可供性和局限性(section 6)。 我们讨论可视化在语法设计中发挥的重要作用，并分析三个方面的权衡：语言设计过程、编码内与编码之间的动画支持以及动画关键帧模型。

1 相关工作

我们的贡献源于对交互和动画相结合的价值的感性工作，并受到用于创作动画数据可视化的现有工具包的设计的启发。

1.1 信息可视化中的动画

在 2002 年的一篇经典论文中，Tversky 等人[47]质疑动画图形的功效。 在回顾了近 100 项比较静态和动画图形的研究时，作者无法找到令人信服的案例来证明动画图表完全优于静态图表。 此后，可视化研究人员进行了一系列研究，确定了对动画在可视化中的价值持乐观和谨慎态度的理由。 例如，一些研究已经证明了对图表转换进行动画处理 [12, 18, 7, 5] 或直接对数据值进行动画处理以传达不确定性 [13, 17] 的优势。 然而，这些研究也呼应了 Tversky 等人的担忧，即动画往往过于复杂或太快而无法准确感知 - 例如，Robertson 等人发现动画趋势可视化效果优于静态小倍数显示[33].

为了改善动画的这些局限性，Tversky 等人建议编写具有交互性的动画，特别是通过允许重新检查或关注所描绘数据子集的技术。 罗伯逊等人开始通过测试静态和动画刺激的交互式替代方案来探讨这个问题——在这里，单击单个标记会添加一条覆盖线，描绘其随时间变化的轨迹。 他们发现，尽管参与者在这种交互条件下并没有变得更加准确，但在使用这种可视化进行数据分析时，他们的表现更快[33]。 在后续工作中，Abukhodair 等人[2]进一步将 Robertson 的结果结合起来，发现当用户想要深入了解数据或有特定的目标时，交互式动画可以有效且比单独的动画更加准确。有关兴趣点的问题。 最近的结果同样充满希望：在眼动追踪研究中，Greussing 等人 [11] 发现交互式动画图形不仅比静态或纯交互式等价物受到更多关注，而且这些图表还产生了更高的结果参与者的知识获取。 作者认为，对记忆和表现的影响增强是由于对可视化的参与度和注意力的增加，这与注意力的其他研究相一致[4]。 这些结果激励着我们的工作。 通过提供交互和动画的统一抽象，Animated Vega-Lite 允许分析师在两种模式之间快速切换，或将它们组合在一起以最适合他们的需求。 此外，由于我们的抽象保留了 Vega-Lite 的生成特性，我们相信我们的贡献通过允许研究人员更系统地隔离、变化和比较个体交互和动画技术，降低了进行未来此类研究的门槛。

1.2 创作交互和动画

在subsection 2.1中，我们描述了动画Vega-Lite和函数式反应式编程（FRP）之间概念上的相似之处。 此外，在section 6中，我们对Animated Vega-Lite和gganimate [42]、Data Animator [46]、Gemini/进行了详细比较Gemini² [19, 20] 和 Canis/CAST [10, 9]。 在这里，我们调查了其他用于创作交互和动画的系统，这些系统为我们的方法提供了信息。

可视化工具包（例如 D3 [3]、Plotly [1] 和 Matplotlib [14])提供了许多用于创作和编写交互的工具动画，包括技术类型（例如，刷动、悬停和动画帧）到事件回调和转换函数。 技术类型可以帮助促进快速的创作过程，使设计人员能够轻松实例化常用技术，但也呈现出尖锐的抽象悬崖[44]。 如果设计人员希望产生更多自定义交互或动画技术，他们必须转向完全不同的表示法：编写低级、命令式事件回调或转换函数。 这种抽象悬崖还增加了创作过程[44]的粘度。 例如，使用 D3 在介绍中描述的分面数据的静态、交互式和动画显示之间进行切换将涉及以不平凡的方式重构规范​​代码 - 如果使用 HTML 模板来生成 SVG 而不是使用 HTML 模板来生成 SVG，则这个问题会加剧。与 d3-selection 相比，在使用 Svelte、Vue 或 React 等现代前端框架时，这种情况越来越多。

相比之下，Animated Vega-Lite 与其前身一样，优先考虑简洁的高级声明性规范。 正如section 2所述，用户可以进行原子编辑（即更改单个关键字，或添加本地化的几行规范代码），以快速探索三种模式的设计。 然而，权衡是表达能力之一。 Animated Vega-Lite 用户仅限于编写语言原语；虽然这些原语足以广泛涵盖交互和动画分类(section 5)，但它们的表达范围必然小于其较低级别的对应物。

2 动机：统一交互和动画

在本节中，我们将讨论我们观察到的交互和动画之间的相似之处。 这些相似性推动了我们的设计决策，使我们能够仅用最少的附加语言原语来扩展 Vega-Lite，并产生低粘度语法，使静态、交互式和动画模式之间的切换变得容易。

Example technique	Interaction intent [51]	Animation type [12]
Conditional encoding	Select	—
Panning	Explore	View transformation
Zooming	Abstract / Elaborate	View transformation
Axis re-scaling	Reconfigure	Substrate transformation
Axis sorting	Reconfigure	Ordering
Filtering	Filter	Filtering
Enter/exit	Explore	Timestep
Multi-view	Connect	—
Changing encodings	Encode	Visualization change, Data schema change

表格1： 交互和动画分类法的通用技术。

2.1 概念上桥接交互和动画

我们观察到交互和动画在低抽象层次和高抽象层次上都具有概念上的相似性。 在较低的抽象层次上，Flapjax [26] 和 Fran [8] 等功能性反应编程（FRP）语言，以及 Vega [37] 等基于 FRP 的可视化工具包都表明，交互和动画都可以建模为 事件流。 Vega 示例库演示了这种统一抽象如何提供一致性，并通过相似的句法形式[44]表达相似的语义。 也就是说，画廊重新创建了 Gapminder 全球健康散点图，最初是由 Hans Rosling [34] 制作的动画可视化，但作为由 DimpVis 直接操作技术驱动的交互式可视化[21]. 我们观察到，尽管手动执行起来很乏味，但用户可以通过用响应计时器事件的信号替换数据流顶部附近的信号（对传入的拖动事件做出反应），将此交互式可视化转换回原始动画可视化。相反：当这些信号将拖动事件的位置映射到年份值时，计时器信号将简单地发出每个事件的下一年值。 下游反应逻辑的其余部分将保持不变。 然而，正如 Vega 作者所发现的[38]，额外的语言设计是必要的，以确保 FRP 原语与图形结构的语法组合在一起，并促进动态可视化的更高级别的创作。

图1： 分析师使用 Animated Vega-lite 的工作流程。 A）鸟类迁徙的静态可视化。 B) 添加交互以将鼠标悬停在迁移路径上并查看工具提示。 C) 从静态线切换到动画圆圈标记。 D) 添加过去 5 天的动画路径轨迹。 E) 添加交互式滑块来拖动动画。

为了在更高的抽象层次上分析交互和动画之间概念上的相似性，我们参考了 Yi 等人 [51] 和 Heer 和 Robertson [12] 分别对每种模态的技术进行分类。 这些分类法是通过利用示例可视化来定义的，尽管它们是单独定义的，但共享许多激励技术(Table 1)。 例如，Heer 和 Robertson 引用平移作为视图转换的示例，因为它改变了读者的观点，同时保持数据模式和编码不变。 Yi 等人还考虑平移，将其归类为探索交互的示例，因为它涉及随着点移入和移出视口而显示新的数据子集。 缩放是视图转换的另一个示例，也被描述为摘要/详细交互，因为它可用于以不同细节级别显示数据。 正如Table 1 所示，我们观察到两种分类法引用的技术存在大量重叠。 尽管select交互缺乏明确定义的相应动画类型，但条件编码是动画可视化中常用的技术。 同样，尽管 Heer 和 Robertson 的连接交互分类中没有相应的类别，但应用于多个视图之间共享支持数据的动画可以实现突出显示相关点之间关系的相同目的。

2.2 低粘性创作：使用场景示例

静态、交互和动画的统一抽象也促进了低粘性的创作过程（即能够轻松地在模式之间切换，或将它们组合在一起）。 为了说明这种方法的功能可供性，我们提供了一个示例演练，讲述了正交学家伊玛尼 (Imani) 计划的一次新的观鸟探险。 Imani 拥有一个鸟类迁徙数据集，其中包含各种鸟类一年中每一天的平均纬度和经度[22]。 为了确保旅行富有成效，伊马尼希望了解迁徙模式与一年中不同时间和地理区域的对应关系。

静态(Figure 1A）。 Imani 从静态可视化开始分析，以获得数据集的概述。 她绘制了一张地图，并使用线标记将迁徙路径可视化：每种鸟类都被描绘成一条颜色独特的线，沿着给定的纬度和经度连接各个日常点。 然而，Imani 很快就不知所措，因为即使在调整标记不透明度之后，数据集的大小也会产生太多重叠线，导致该静态视图无法发挥作用。

交互式(Figure 1B）。 为了挑选出个别鸟类，并开始生成和回答假设的循环，伊马尼认为在静态展示上添加一些交互性。 她添加了一个名为 highlight 的点选择，并由 mouseover 事件驱动。 默认情况下，此选择会填充鼠标光标下方的数据元组，并且按下 shift 修饰键时会添加或切换其他元组。 Imani 编写了一个条件编码来交互式调整标记外观：选定的路径以完全不透明度和较大的尺寸绘制，而未选定的路径以较低的不透明度和较小的尺寸绘制。 因此，当 Imani 在可视化中移动鼠标时，她能够更好地追踪各个路径，并添加一个工具提示编码通道来显示和记录物种名称。

这种交互式视图让伊马尼更好地了解迁移路径。 但是，为了能够计划她的探险活动，她需要了解不同鸟类在任何一天可能出现的位置。 到目前为止，Imani 使用了普通的 Vega-Lite 抽象。 在后续步骤中，我们将展示 Animated Vega-Lite 的功能如何帮助 Imani 加深分析。

时间编码通道(Figure 1C）。 Imani 交换为圆形标记，并将 day（对一年中的日期进行编码的字段，从 0 到 365）映射到新的 时间编码通道。 通过这两项编辑，每种鸟类都被绘制为一个圆圈，指示其在特定日期的位置，并通过 day 值进行可视化动画。 伊马尼现在可以追踪鸟类在一年中的迁徙路径。

时间事件流(Figure 1D）。 然而，伊马尼敏锐地意识到她的数据集仅包含每个物种的平均值。 鸟类往往出现在数据集中平均一天的一小段时间内的给定位置。 因此，为了确保她不会得出错误的结论，伊马尼希望将这种变化可视化为一条路径。 为此，她添加了一个名为 spread_window 的新点选择，其中包含一个自定义 谓词 - 一个用于标识哪些数据元组应被视为属于选择范围的函数。 在本例中，Imani 编写一个谓词来选择当天之前五天的数据。 她通过编写引用保留名称 anim_value 的不等式表达式来实现此目的，该名称存储动画的当前数据值。 与现有的在用户输入事件时更新的 highlight 点选择相比，spread_window 而是在每个 timer 滴答时填充并重新填充。 她使用 spread_window 动态过滤圆圈标记，确保仅显示所选内容内的数据值并进行动画处理。 为了在视觉上区分当天的点，她还将时间编码详细说明为名为 current_frame 的显式选择，并使用它来驱动条件不透明度编码。 她以完全不透明度渲染当前点，同时以较小的不透明度渲染尾随点。

图2： 颇具影响力的 Gapminder 动画 [34] 的动画 Vega-Lite 规范。 (A) 仅使用时间编码的最小规范。 (B) 详细说明了相同的规范以显示默认编码属性和默认选择。 (C) 从生成的动画中选择关键帧。

组合交互+动画(Figure 1E）。 在观看这段路径动画时，伊马尼注意到一群鸟似乎在三月底访问了佛罗里达州彭萨科拉，并指出该地区是她探险的潜在地点。 然而，在她让同事们知道之前，她想调查一下经过该地区的鸟类的迁徙模式——如果这些物种倾向于在世界其他地方共处，那么观鸟者就没有理由去旅行特别是彭萨科拉。 为了回答这个问题，Imani 需要对动画状态进行更精细的控制。 她将 current_frame 选择绑定到交互式范围滑块，现在可以在动画和交互式滑动 day 字段之间切换。 她将滑块滑动到鸟类经过彭萨科拉的那一天，为了在可视化中跟踪这些物种，她将交互式突出显示选择修改为单击时触发而不是悬停时触发。 Imani 多重选择（即，按下 shift 键进行单击）经过该区域的鸟类，然后擦洗到不同的一天。 在这里，伊马尼可以看到这些鸟来自美国中西部到加拿大东部的 5 个独特的筑巢地点。 这是有希望的，因为它表明这些物种在彭萨科拉独特地重叠，使其成为主要的观赏目的地。

摘要。 借助 Animated Vega-Lite，Imani 能够通过一系列原子编辑或其他本地化更改，而不是大规模重构或重组代码，在静态、交互式和动画可视化之间切换。 此外，我们还扩展了 Vega-Lite 对动画的高级功能：Imani 能够将动画表达为数据选择和转换，而不是操纵关键帧或指定过渡状态；并且，Animated Vega-Lite 编译器合成了适当的默认值和底层机制，以便动画正确展开。 最后，由于 Animated Vega-Lite 提供了统一的抽象，Imani 能够重用 Vega-Lite 的现有原语来创作混合交互式动画可视化以及自定义技术，而无需特殊用途的功能 - 例如，将动画与 on-单击突出显示并使用窗口数据转换组合选择来绘制尾随标记，而不是像 gganimate 那样使用 shadow 函数。

3 Vega-Lite 中的动画语法

在 Animated Vega-Lite 中，用户使用时间编码通道和计时器驱动的选择指定动画。 时间编码提供了一种将多面静态可视化转换为动画的轻量级方法。 为了进一步自定义动画设计或轻松添加交互，用户可以指定动画作为选择。 选择表达动态数据查询，现在通过输入事件（与普通 Vega-Lite 一样）或现在通过计时器滴答来填充。 然后，定义的选择可用于驱动数据转换、缩放函数或有条件地编码视觉属性。 我们的动画模型富有表现力地扩展了静态和交互式可视化的现有抽象，同时最小化地增加了语言表面积和复杂性。

3.1 时间编码通道

在 Vega-Lite 中，编码确定数据值如何映射到标记的视觉属性（也称为通道）。 Vega-Lite 包括两个用于空间位置的通道：x 和 y。 动画 Vega-Lite 添加了一个新的时间位置通道，称为 time。 用户通过提供field属性来指定时间编码，该属性是数据列名称的字符串。 该字段可以是具有排序顺序（定量、时间、序数）的任何度量类型，并且不一定需要表示时间戳。 系统使用此列中的不同值将数据行分组到称为关键帧的时间方面。 在动画的持续时间内，每个关键帧都会按顺序显示。

图 2A 显示了 Rosling 的 Gapminder 动画 [34] 的 Animated Vega-Lite 规范。 时间编码以黄色突出显示，将数据集的 year 字段映射到时间编码通道。 系统使用 year 的不同值将行分组到关键帧中。 换句话说，数据集中每个可能的年值都有一个关键帧（即1955、1960、1965、...、2005)（图2

3.1.1 关键字段

中间动画（通常称为补间)是一种标准动画技术，涉及生成附加帧以在两个关键帧之间平滑过渡。 通过添加补间，动画将给出随时间连续变化的视觉印象，即使数据表示离散测量值也是如此。 在数据可视化中，补间具有额外的意义，因为它需要在数据集中不存在的值之间生成和插值。 在 Animated Vega-Lite 中，为了指定关键帧之间的补间，用户在时间编码通道中指定一个 key 属性，该属性引用字段名称。 此关键字段用于将跨关键帧的行分组在一起。 对于两个给定的连续关键帧，共享关键字段相同值的行将被视为单个标记实例的开始和结束状态。 键值在关键帧内应该是唯一的，以防止歧义；否则，单个标记实例可能有多个开始或结束状态，从而导致未定义的行为。 如果用户未指定关键字段，Animated Vega-Lite 编译器会尝试根据标记类型和其他指定的分类通道（例如 color 或 detail)推断合理的默认值> — 一种遵循 Vega-Lite 现有推论的方法。

在 Gapminder 示例中，图 2B 显示了图 2A 中的 Gapminder 规范，并明确指定了默认值。 此处，country 用作默认键字段，因为它也在 color 编码通道上进行编码。 考虑 year 值为 1955 和 1960 的连续关键帧。 对于每一年，每个散点图点都由唯一的国家值标识。 因此，对于从 1955 年到 1960 年的补间，系统会对每个国家/地区的两行进行插值，以在每个动画帧处生成相应的中间点。

3.1.2时间尺度

编码使用缩放函数从数据域映射到视觉范围。 对于空间编码通道，此范围以相对于渲染可视化的边界框的像素为单位进行测量。 对于时间编码通道，我们测量从动画开始起经过的时间范围（以毫秒为单位）。 用户使用时间尺度指定动画的计时（例如，通过指定整个动画持续时间或关键帧之间的时间量作为步)。 与现有编码通道一样，如果用户未指定比例，Vega-Lite 会推断默认比例属性。 默认情况下，时间编码通道的尺度使用支持字段的唯一值作为尺度域，并创建每个域值 500ms 的默认步长范围。 例如，Gapminder 域是 1955 年至 2005 年（含）之间每五年一次的列表。 默认范围将 1955 映射到 0ms、1960 映射到 500ms、1965 映射到 1000ms，依此类推。 用户可以覆盖此默认范围以减慢或加快动画速度。

尽管默认域足以表达最常见的动画，但用户可能想要覆盖该域。 提供自定义域对于指定需要直接引用中间值或需要通过数据集中缺少的值进行动画处理的非基于关键帧的动画非常有用。 例如，图 3 显示了此类用例的示例。 动画应以恒定速率在 24 小时时间跨度中前进。 但是，数据集不包含具有在所需域中均匀分布的值的字段。 因此，使用默认比例域时，动画看起来会在时间戳之间跳跃，而不是平滑地在时间戳之间移动。 为了实现所需的行为，用户可以指定一个自定义域来表示 00:00 到 23:30 之间的连续间隔。

图3： Dunkin’ Donuts 商店开门和关门时间的动画。 通过自定义域和谓词，动画会以恒定速率在 24 小时内前进，并且如果当前时间介于商店的开门时间和关门时间之间，则有条件地为每个商店着色。

3.1.3 重新缩放

默认情况下，可视化的数据矩形（或视口）固定为根据完整数据集计算的 x 和 y 尺度的初始范围。 但是，对于关键帧动画，在任何给定时间仅显示数据的子集。 如果用户想要仅基于当前关键帧中包含的数据而不是原始完整数据集重新计算视口边界，他们可以在时间编码中设置一个名为rescale的标志。 当rescale为true时，视口的边界将在动画的每一步重新计算。 我们将此概念称为重新缩放，因为重新计算视口边界涉及更新每个关键帧处的 x 和 y 比例域。

图4演示了rescale的使用。 图 4A 中启用了重新缩放，其中视口根据当前选择进行更新。 可视化在当前显示的条上保持紧密缩放，最长的条始终缩放到接近视口的整个宽度。 相反，图 4B 禁用了重新缩放。 视口最初是使用完整数据集计算的，并保持固定。 这对于 Gapminder 来说是合适的，因为我们想要展示各国沿着固定比例移动。 然而，它对于条形图竞赛的帮助较小。 动画优先考虑使排名靠前的条形的顺序突出，而不是与固定比例进行位置比较。

图4： 重新创建 D3 条形图竞赛示例 [28] 演示 rescale 时间编码属性。 (A) rescale 为 true：在每个关键帧上重新计算视口。 (B) rescale 为 false：视口是在整个数据集上计算的，并且不会随着选择而更新。

3.2 使用计时器事件流进行选择

选择是当事件流中发生更新时填充的数据点的子集。 在 Vega-Lite 的交互式语法中，选择是使用用户输入事件流（例如单击、鼠标移动或键盘按下）来定义的。 系统使用事件的属性来查询一组数据点。 然后可以应用所选数据来更新可视化规范中的下游基元，包括数据转换、比例函数或条件视觉编码。 例如，使用 mouseover 事件定义的选择可用于突出显示用户将光标悬停在其上的标记。 在底层，选择接收 mouseover 事件流，其中 x 和 y 坐标以像素为单位。 它使用与 x 和 y 编码通道关联的比例将这些屏幕坐标反转回数据坐标（即相应比例域中的值）。 默认谓词函数迭代数据集中的所有行，并包括与选择中的这些数据值匹配的行。

动画选择类似于交互式选择。 但是，动画选择不是对输入事件做出反应，而是使用 timer 事件流来提前表示动画运行时间（以毫秒 (ms) 为单位）的内部时钟。 当到达时间编码尺度定义的范围末尾时，该时钟重置为 0 毫秒（即动​​画循环时间尺度范围的持续时间）。 随着时钟更新，经过的时间值将映射到时域中的值（即时间编码的字段值）。 动画选择会更新以包含与该值匹配的所有数据点。

由于选择依赖于比例将地图时间转换为数据值，因此基于选择的动画仍然需要定义时间编码通道。 事实上，所有仅用时间编码即可表达的动画都可以细化为基于选择的动画。 换句话说，基于选择的动画比仅使用时间编码的动画更具表现力。

3.2.1 应用选择

在 Vega-Lite 中，选择可以应用于其他语言结构，包括条件标记编码、比例域或数据转换[52]。 Animated Vega-Lite 继续保留这种合成属性：只要 Vega-Lite 语言支持选择，动画和交互式选择就可以互换使用。 因此，根据等人的交互技术分类[51]，定时器事件驱动的选择继承了交互选择的表现力。 动画可用于：选择感兴趣的标记； 探索数据子集（平移和缩放）； 重新配置数据到不同的转换状态，连接相关项；通过概述和细节进行摘要/阐述；并动态过滤数据。 然而，它们不能用于动态改变视觉编码的属性，这是一种不属于基于选择的模型的交互技术，也是基础 Vega-Lite 的限制。

3.2.2 谓词

随着动画的经过时间的推进，选择使用时间编码中定义的比例将经过的毫秒（在比例范围内）反转为数据值（在比例范围内）。 因此，在任何给定时间，都有一个内部变量具有与动画当前时间相对应的数据值。 当 Vega-Lite 规范编译成 Vega 时，该变量表示为称为 anim_value 的 Vega 信号。 在 Gapminder 示例中，anim_value 从 0 毫秒处的 1955 开始，并前进到 1960, 1965, ..., 2005。

为了构建关键帧，选择会根据 anim_value 的当前值查询要包含在关键帧中的数据元组子集。 默认情况下，如果元组在时间编码字段中的值（例如 Gapminder 的 year)等于 anim_value，则元组包含在关键帧中。 但是，要定义用于确定关键帧的替代包含标准，用户可以指定自定义谓词函数。 例如，如果在动画的每个步骤中，用户希望显示年份小于或等于 anim_value 的所有点，他们将使用以下谓词：

{“field”：“年份”，“lte”：“anim_value”}

以前，Vega-Lite 不允许用户自定义选择谓词，因为大多数交互可以使用默认谓词和选择转换的组合来表达。 尽管如此，在选择规范中启用谓词定制也增加了交互式语法的表达能力。

3.2.3 输入元素绑定

使用 bind 属性，用户可以使用动态查询小部件（例如 HTML 滑块或复选框）填充选择。 对于动画选择，输入元素绑定提供了一种向动画添加交互式播放控制的便捷方法。 例如，用户可以将动画选择绑定到复选框以切换动画是正在播放还是暂停。 同样，他们可以将选择绑定到范围滑块并拖动以拖动到动画中的特定时间。

在组合动画和交互时，使用滑块表面擦洗动画是一个有趣的设计挑战：系统应如何在动画计时器和用户交互之间委托控制？ 最初，动画由计时器驱动，滑块可视化计时器更新。 当用户开始拖动滑块时，系统会暂停动画并将控制权委托给用户交互。 暂停是必要的，以便在用户当前擦洗时滑块不会继续向前前进。 当用户完成拖动后，他们可能希望将控制权交还给动画。 为了实现这一点，Animated Vega-Lite 自动在绑定滑块旁边包含一个播放/暂停复选框。 用户只需重新选中该框即可将动画控制权交还给计时器。

3.2.4暂停

Animated Vega-Lite 支持以两种方式暂停：通过交互和通过数据值。 交互式暂停是使用 Vega-Lite 事件流的 filter 属性指定的。 用户可以向计时器事件流的 filter 属性提供 Vega-Lite 参数的名称。 参数可以是选择或变量。 当提供的参数计算结果为 true（即非空选择或 true 布尔变量）时，过滤器将捕获传入事件，防止动画时钟前进。 当参数评估为 false 时，事件将恢复传播并且动画将继续。 例如，用户可以将复选框绑定到名为 is_playing 的参数，并使用以下事件流定义在选中该框时暂停可视化：

"on":{"type": "timer", "filter": "is_playing"}

使用动画选择定义的 pause 属性指定按数据值暂停。 用户提供要暂停的数据值列表以及每次暂停的持续时间。 例如，用户可以指定 Gapminder 动画应在 1995 年暂停 2 秒，以引起人们对该年数据的注意：

“暂停”：[{“值”：1995，“持续时间”：2000}]

3.2.5全球宽松

Easing 是一种常见的动画技术，涉及控制动画计时器前进的速率。 缓动通常使用预定义函数调色板来实现，这些函数将动画时域映射到变换后的时域。 例如，指数缓动函数可能会导致动画时钟开始缓慢前进，然后随着动画的进展呈指数加速。 在 Animated Vega-Lite 中，动画时钟默认线性前进。 但是，用户可以使用选区的 easing 属性来指定应用于整个动画持续时间的缓动函数。 动画 Vega-Lite 公开了 D3 的命名缓动函数 [27]。

4实施

我们使用原型编译器实现 Animated Vega-Lite，包装现有的 Vega-Lite 编译器以摄取 Animated Vega-Lite 规范并输出较低级别的 Vega 规范。 Animated Vega-Lite 原型编译器首先将用户提供的规范扩展为“规范化”格式，并显式填充所有隐式默认值。 此步骤包括为仅使用 time 编码指定的动画生成默认选择和转换，并填充默认比例和键定义。 此规范化规范将传递到下一个编译器步骤以简化处理。

为了将 Animated Vega-Lite 转换为低级 Vega，我们使用现有的 Vega-Lite 编译器对 Vega 进行初始转换（使用删除了动画的规范副本），然后调用一系列函数来编译动画 -规范的特定部分并将它们与输出 Vega 合并。 由于 Vega-Lite 的高级抽象没有与低级 Vega 概念的一对一映射，因此看似孤立的 Vega-Lite 片段通常会在 Vega 规范的许多不同部分进行更改。 这些函数中的每一个都接受 Animated Vega-Lite 和标准 Vega 的片段，并输出部分 Vega 规范，其中包括要合并到输出中的数据集、信号、比例和标记定义。

编译分六个步骤进行。 首先，compileAnimationClock 使用动画选择和时间编码通道的定义来创建 Vega 信号和数据集，用于控制动画的当前状态、处理暂停以及与交互式播放控件的交互。 接下来，compileTimeScale 接受时间编码的定义以及 Vega 标记和刻度。 它为时间编码创建 Vega 级尺度，并提供信号来处理动画时钟与当时相应数据值之间的反转。 如果适用，它还会应用重新缩放来标记编码。 然后，compileAnimationSelections 摄取动画选择的定义，以生成实现自定义谓词、暂停和缓动以及输入元素绑定的 Vega 信号和数据集。 第四，compileFilterTransforms（编译筛选变换）获取动画选区和引用这些选区的任何筛选变换，并将选区具体化为 Vega 中的筛选数据集。 这些数据集为每个关键帧处的渲染标记提供支持数据。 然后，compileKey 使用时间编码规范生成处理关键帧之间补间的数据集和信号。 最后，compileEnterExit支持Animated Vega-Lite中的顶级进入和退出编码定义，将它们转换为Vega级进入和退出编码。 由于 Vega 现有的限制，动画目前还不能很好地支持进入和退出。 然而，在 Vega 支持之前，设计者应该能够在标记进入和退出当前关键帧时控制视觉编码的行为。

我们选择将编译器实现为现有 Vega-Lite 编译器的包装器，以促进快速原型设计。 然而，我们当前的方法面临着性能挑战，可以通过对 Vega 和 Vega-Lite 进行内部更改来改进这些挑战。 例如，我们目前通过创建三个单独的数据集来支持补间：当前关键帧、下一个关键帧以及将补间计算为派生列的连接数据集。 这种昂贵的操作会导致大型数据集出现明显的滞后。 在未来的实现中，我们可以创建一个 Vega 数据流运算符，利用动画的语义来更有效地计算补间。 例如，操作员可以创建由时间方面的滑动窗口支持的单个数据集，而不是独立计算多个数据集并执行连接。

5 评估：示例库

图5： 动画 Vega-Lite 示例演示了交互和动画分类法的覆盖范围 [51, 12]（请参阅Figure 4 了解示例 substrate 变换 和 Figure 3 用于选择)。 A) 通过平移视图转换，通过概述+详细信息摘要/详细说明，以及连接多个视图。 B) 通过谓词过滤ring数据。 C) 排序 / 重新配置凹凸图中的排序轴。 D) 探索指数图表的连续时间步长。 E) 纽约时报风格的假设结果图[15]。 F) Gapminder 上的交互式画笔选择。

为了评估 Animated Vega-Lite 的表现力，我们创建了一个示例库来演示交互意图 [51] 的 Yi 等人分类法 和 Heer & Robertson 的分类法的覆盖范围动画统计图形中转换类型的分类[12]。 如 Figure 5 所示，我们支持 6/7 个交互类别和 5/7 个动画类别。

Figure 5a 演示了概览 + 详细可视化。 选区控制底视图上的画笔，从而设置顶视图的缩放视口。 此选择是使用定义 x 轴字段上的滑动窗口的谓词来定义的。 当画笔由动画驱动时，选择会在每个计时器事件上更新。 当画笔由交互驱动时，选择会在拖动事件上更新。 由于原始的 Vega-Lite 选择模型将平移和缩放统一为应用于比例域的选择，因此该方法可以适用于对任意几何平移和缩放行为进行动画处理。 此可视化演示了视图转换，通过平移和缩放顶视图来改变读者的视角。 它还通过在顶部和底部视图中以不同详细程度显示数据来演示摘要/详细意图，并通过在多个视图中显示相应的数据来演示连接意图。

Figure 4 显示了使用时间编码的 rescale 属性在每个帧上动态重新计算条形图的 x 比例(subsubsection 3.1.3)。 此动画技术通过缩放操作演示了基材变换。 它还通过显示数据的新空间排列来演示重新配置意图。

在Figure 3和Figure 5b中，我们对整个数据集应用条件过滤器，过滤器参数随时间变化。 与分面相反，过滤可以利用自定义选择谓词来显示和隐藏数据 - 单个数据点可以出现在多个组中。 两种分类法都包含一个filtertering类别，通过在显示中添加或删除元素来显示。 Figure 3 另外演示了通过使用条件编码突出显示所选数据的选择意图。

Figure 4 和Figure 5c 显示了带有排序轴的示例。 当在时间编码中指定 key 时，系统会自动补间元素的位置，即使其排序索引在下一个关键帧中已更改。 随着底层数据的变化不断对元素进行排序，演示了排序转换，以及重新配置意图。

在 Animated Vega-Lite 中，时间编码默认在连续时间值之间转换（例如 Figure 2)。 Figure 5d 演示了此动画的另一个示例。 默认的动画点选择应用于数据转换，该数据转换在每个价格变动时重新规范化股票价格时间序列图表。 原始的 Vega-Lite 论文包含此示例的交互式版本，它填充鼠标悬停事件 [36] 上的点选择。 这些示例演示了时间步转换，它还通过在每个步骤显示新数据点来实现探索意图。 轴重新规范化也是重新配置意图的一个示例。

除了实现对两种分类法的广泛覆盖之外，我们的系统还支持模拟技术，包括假设结果图(Figure 5e）[13]。 并且，如前面subsubsection 3.2.1中所讨论的，动画选择可以应用于与交互式选择相同的一组动态视觉行为。 因此，在 Vega-Lite 中对现有交互技术进行原型设计时，用户可以轻松地在计时器和输入事件流之间切换。 例如，Figure 5a 和Figure 5d 显示了驱动常见交互技术的动画选择——分别是平移和重新规范化。 用户还可以通过定义额外的选择，轻松地构建具有动画可视化的交互技术。 例如，Figure 5f 演示了用于突出显示动画 Gapminder 可视化区域的交互式画笔。 当兴趣点进入或退出画笔区域时，它们会被有条件地着色。

讨论和限制。 与原始 Vega-Lite 一样，Animated Vega-Lite 有意牺牲一些表达能力限制，以获取简洁、高级的声明性规范。 昆虫。 6.2.1 和 6.2.2，我们根据动画技术类别详细介绍了这种表现力权衡（Animated Vega-Lite 主要支持 scene技术而不是 segue)以及对关键帧如何建模和生成的影响（Animated Vega-Lite 支持非参数关键帧过渡，并对参数关键帧过渡提供一些有限的支持）。 因此，较低级和命令式语言必然更具表现力：例如，D3 可以表达场景和连续动画，但使用不同的语言结构（分别是计时器事件循环和转换函数）。 正如这些部分所描述的，提供高级声明性规范，不仅统一这些不同的动画概念模型，而且还统一交互和静态图表，仍然是未来工作的一个引人注目的方向。

通过扩展 Vega-Lite，Animated Vega-Lite 也继承了其前身的局限性。 例如，Vega-Lite 选择无法在运行时更改视觉编码或数据转换管道（Yi 等人的分类法 [51] 中的 encode 交互类型）；因此，Animated Vega-Lite 无法支持 Heer & Robertson 分类[12] 中的可视化更改 或数据模式更改 转换类型。

6 评估：批判性反思

为了确定我们的语法的设计权衡，我们按照批判性反思评估方法[35]将我们的方法与现有的动画可视化语法进行了比较。 我们招募了五位现有语法的开发人员：John Thompson 和 Leozhi Cheng Liu Data Animator [46] 的作者、Canis [10] 的童哥和 CAST [9]、gganimate [ 的 Thomas Lin Pedersen] 43]，以及 Gemini [19] 和 Gemini² [20] 的 Younghoon Kim。 我们专注于动画语法开发人员，因为交互式语法是在原始 Vega-Lite 论文中评估的。 我们对每位参与者进行了一个小时的预访谈。 然后，我们要求他们分别阅读类似于section 2 和 section 3 的系统演练和语法文档，长时间异步地学习我们的语法，并运行类似的示例到section 5 中找到的内容。 我们进一步建议参与者编写新的规范和/或移植其他示例，包括来自他们自己的工具的示例。 我们鼓励参与者在此过程中做笔记并反思 Animated Vega-Lite 的设计。 最后，我们对每位参与者进行了持续 30 至 60 分钟的事后访谈。 每位参与者都获得了一张 125 美元的礼品卡作为补偿。

我们的目标是（i）将他们的设计过程与我们的设计过程进行比较和对比，（ii）了解他们的语法与我们的语法之间的差异和设计权衡，以及（iii）产生有关未来动画语法方向的见解。 在采访中，本文的三位作者开始提出初步的主题假设。 采访结束后，我们独立进行了主题分析，最后汇总并综合了我们的见解，总结如下。 这些主题让我们深入了解语法的设计，以及更普遍的动画可视化语法。

6.1 语法设计流程

6.1.1 具体示例激发语法设计

在确定研究项目范围时，我们的受访者优先考虑他们认为个人认为引人注目的激励性例子。 例如，Data Animator 和 Gemini 的作者都部分受到 R2D3 [40] 的推动。 正如我们在以下小节中讨论的那样，选择支持的示例会导致设计权衡，例如场景主导抽象和后续主导抽象之间(subsubsection 6.2.1)。 因此，一些引人注目的实际示例可以显着影响开发人员构建的语法。 多次采访中引用的其他例子包括 Gapminder [34]、Periscope 的枪杀 [31] 以及《纽约时报》(NYT) 和《卫报》中的动画。

另一方面，缺乏现有示例也可能会激励语法开发人员。 例如，为了更深入地了解动画可视化技术的流行程度，Kim 抓取了 2018 年《纽约时报》和《卫报》的文章以及同年的 YouTube 视频。 他注意到他研究的大约 90% 的动画可视化更新了数据，但保持编码固定。 R2D3 是一个值得注意的例外。 在 Data-Gifs 示例库 [39] 中可以发现类似的不平衡，其中超过一半的示例具有固定编码。 Kim 假设这种不平衡受到现有工具可供性的影响，并决定优化 Gemini 以适应不断变化的编码之间的转换。

对于 Animated Vega-Lite，我们的动机是大量具有静态编码的现有示例，例如 Data-Gifs 示例库中的示例。 此类别包括许多著名的设计，例如 Gapminder 和条形图竞赛。 我们不是专注于开发关键帧之间过渡的表达语言，而是专注于通过选择生成关键帧的表达语言。 我们的抽象有助于可视化的设计，必须生成由固定编码支持的许多关键帧。

6.1.2 自然编程与自然编程 核心演算设计

为了使他们的系统易于目标受众使用，Data Animator 和 Gemini 的作者旨在开发与动画设计师现有心理模型相匹配的语法。 为此，两个小组进行了访谈，提示经验丰富的动画师绘制界面或编写伪代码来重新创建示例动画可视化[45, 19]。 这些形成性研究产生了基本的抽象概念。 例如，Gemini 的研究产生了同步(“同时”)和连接(“然后”、“之后”)的概念Data Animator 的研究表明设计师对 Adob​​e After Effects 中关键帧的熟悉程度。 这种设计过程称为自然编程，开发人员的目标是“让语言和环境按照非程序员期望的方式工作” [30]。

相比之下，我们着手为 Animated Vega-Lite 开发一个小的核心演算 [6] 的抽象，我们在section 3中概述了这一点。 我们的设计动机是探索交互和动画是否可以统一。 这种统一很可能不是由目标用户引发的。 因为我们论文的关键思想是确定一个统一的抽象，所以这种方法上的差异导致了设计权衡。 正如 Kim 解释的那样，Animated Vega-Lite 对于 Vega-Lite 用户来说可能看起来很自然，但对于熟悉 Adob​​e AfterEffects 等动画工具的人来说可能会出现更陡峭的学习曲线，因为 Animated Vega-Lite 没有明确的关键帧概念。

通过符号认知维度[44]分析这些过程，我们发现在自然编程过程中与最终用户密切迭代会产生一种紧密映射到普通用户心理的语法。楷模。 另一方面，通过将抽象提炼为一组精简的正交概念，核心微积分过程可以更好地强调具有低粘度的一致 API。 过分强调一个过程或另一个过程可能会将语言设计拖到一边。 通过 PLIERS，Coblenz 等人 [6] 为开发人员如何集成和平衡这些方法提供建议。 他们建议开发人员在开发其语言（核心微积分）的理论基础和面向用户的语言（表面语言）之间进行迭代。 此外，Coblenz 等人建议通过逐步提示用户提供有关语言提议的 API 的更多信息来适应自然编程。 这种额外的脚手架可以帮助确定自然编程研究如何探索心理模型，并且即使核心微积分与用户熟悉的模型有很大差异，也可以让语言开发人员获得见解。 像 PLIERS 这样的集成设计过程可能是评估未来统一语法的有价值的方法，因为这些系统必须在重要的概念统一与最终用户的易用性之间取得平衡。

6.2 动画抽象和设计注意事项

6.2.1 场景与 Segue 主导的抽象

几位受访者指出 Animated Vega-Lite 的抽象似乎与他们的系统互补。 例如，Kim 指出 Animated Vega-Lite 和 Gemini 之间的概念区别是 “[Animated Vega-Lite] 对 Vega-Lite 内的内部状态进行动画处理，而 Gemini 并不关心内部状态。 它只是在 Vega-Lite 的两种静态之间进行转换。” 同样，汤普森说 “如果你直接将 [Animated Vega-Lite] 与 Data Animator 进行比较，那么它们两个放在一起会非常好。 一个人没有的东西，另一个人却做得很好。” 例如，他强调了 Animated Vega-Lite 从数据自动生成关键帧的能力（例如，Gapminder 中的每个年关键帧）以及 Data Animator 精确指定关键帧之间的过渡（例如交错）作为补充组件的能力两个系统的。 他还赞赏 Animated Vega-Lite 通过分层创建重叠关键帧的能力，如我们的条形图竞赛示例(Figure 4)。 Pedersen 提供了一种解释，解释了为什么我们的方法与我们研究的现有系统是互补的。 在他的用户R! 2018 年主题演讲中，Pedersen 介绍了场景和segue动画[41]的概念。 场景动画（例如 Gapminder）是数据不断变化的动画（例如多年来的国家/地区），但视觉编码却不变。 人们可以想象在固定舞台（即静态视觉编码）中播放的场景。 相比之下，segue 动画（例如饼图转换为条形图）是视觉编码不断变化但数据固定的动画。 在实践中，场景和转场之间的界限并不总是清晰的。 例如，从带状图转换为箱须图既涉及数据的更改（计算总量）又涉及视觉编码的更改（转换为箱须图）。

使用场景和转场的区别，Animated Vega-Lite 和 gganimate 可以被归类为场景主导语法。 这两个系统都旨在通过固定编码覆盖大范围的动画可视化，例如 Gapminder 和鸟类迁徙。 两个系统都支持额外的视觉编码转换集合。 例如，Animated Vega-Lite 支持重新缩放、平移和缩放，而 gganimate 支持可以在具有相同基础数据的不同形状之间进行插值的过渡。 尽管 Animated Vega-Lite 和 gganimate 都是场景主导系统，但 Pedersen 强调了 Animated Vega-Lite 从数据生成任意关键帧的选择模型的表现力（如Figure 3 中的 Dunkin 示例所示）：两者之间的关键概念区别。

另一方面，Data Animator、Canis 和 Gemini 是segue 主导。 这些系统主要侧重于连接可能具有不同视觉编码和数据的两个不同关键帧。 为了构建过渡，Data Animator、Canis 和 Gemini 各自构建两个关键帧之间的映射。 当数据集固定并且只有几个关键帧（通常显示少量转场时）时，这种方法效果很好。 但正如 Thompson 和 Liu 所指出的，为了支持像 Gapminder 这样的动画，这些系统必须为数据集中的每一年生成一个关键帧。

正如section 5中所讨论的，Animated Vega-Lite 继承了 Vega-Lite 无法表示视觉编码和数据转换的复杂运行时更改的能力。 我们怀疑，通过这些功能扩展 Vega-Lite 可以在 Animated Vega-Lite 的未来版本中启用 Segue 动画。 为了支持复杂的运行时更改，Vega-Lite 的条件编码可以从仅标记属性扩展到标记类型和数据转换，如 Ivy [25] 中所示。 我们对进入和退出的支持可以扩展到不仅可以对数据进行操作，还可以对这些更具表现力的编码更改进行操作。

6.2.2 关键帧之间的过渡建模

关键帧是我们采访中最显着的动画抽象。 我们与每位受访者讨论了关键帧概念，他们经常使用关键帧来比较不同系统的抽象。 每个工具都必须做出以下决定：(i) 如何生成关键帧以及 (ii) 如何在关键帧之间进行转换。 此外，关键帧和过渡对于场景主导系统和场景主导系统来说都是有用的抽象。 在本小节中，我们将展示关键帧设计空间的轴：对关键帧之间的过渡进行建模。

非参数转换。 关键帧之间最简单的过渡类型是非参数过渡。 考虑关键帧的线性序列，其中每个关键帧描述整个场景图。 这些关键帧之间的转换是非参数，因为相同的转换应用于每个数据点。 例如，在 0.5 秒内将每个条更改为一个点（segue 动画）是非参数过渡，因为过渡的定义独立于标记的编码数据，即其持续时间是常量值。 同样，Gapminder（场景动画）中的国家/地区动画也是非参数过渡，因为应用于每个标记的过渡是相同的（在固定时间间隔内的两点之间移动）。

Animated Vega-Lite 通过其计时器、缓动和插值抽象支持非参数过渡，这些抽象隐式指定跨关键帧的过渡。 其他库也支持关键帧对之间的非参数过渡，但只有场景主导系统（ganimate 和 Animated Vega-Lite）支持跨 many 关键帧的非参数过渡。 在场景主导动画中，可以在共享固定编码的关键帧序列中重复使用相同的过渡规范。

参数转换。 与非参数转换相比，参数转换涉及依赖于支持数据的转换定义。 此模型的一个常见用例是交错过渡 - 一种常见的 Segue 技术，它对每个动画元素应用较小的延迟，以使它们更容易跟踪 [12]。 由于参数转换取决于数据，因此各个标记在同一转换期间可以具有不同的计时属性。

Segue 主导系统 Data Animator、Canis 和 Gemini 都支持参数化过渡。 但是，正如汤普森在采访中指出的那样，参数过渡​​也增加了场景动画的表现范围。

图6： Data Animator [16] 中的游泳世界纪录示例。

例如，Figure 6 显示了 Data Animator 示例库中的“历史上的游泳世界纪录”。 这个动画散点图显示了世界纪录游泳运动员的回放。 输入数据包括游泳运动员及其最终比赛时间。 当 Thompson 尝试将此示例移植到 Animated Vega-Lite 时，他意识到他 “不知道该怎么做。 本例中的两个关键帧非常简单。 所有圆圈都位于一个 x 位置，然后所有圆圈都位于右侧 200-400 像素处。 对于我们来说，您可以根据数据属性更改每个形状的速度。” 动画 Vega-Lite 可以通过允许用户显式定义过渡来支持此动画，其速度由数据值参数化。

为了支持参数转换，Animated Vega-Lite 的未来版本可以使用 Lu 等人的“动态函数”概念[24]。 这些函数使用数据和转换之间的映射来指定转换随时间的变化率属性（例如，编码转换速度而不是标记位置）。 将这种 Segue 主导概念应用到 Animated Vega-Lite 中可以提高表现力，尽管需要进一步的工作来理解它的组成以及对静态和交互式语言结构的影响。 例如，如果将 segue 过渡属性作为直接编码而不是速率转换回场景关键帧（例如，将过渡速度实例化为附加位置关键帧），则可以更轻松地与现有静态和交互式 Vega-Lite 构造组合。 然而，这会牺牲 segue 表示的内存效率。

串联和并联连接转换。 一些最引人注目的动画示例无法表示为线性过渡序列，无论是否参数化。 例如，Periscope 的枪杀动画 [31]（我们的受访者经常引用的可视化效果）即使通过参数转换也无法轻松表示。 在讨论这个例子时，汤普森说道： “这是我的清单上的一个‘哦，如果我们能创造这个，那就太酷了，’，然后我就想不出一种方法来做到这一点。 [...] 如何让圆圈出现然后下降，然后线条继续延伸？ 我不知道如何[在 Data Animator 中]做到这一点”. 创作此动画很困难，因为没有线性过渡规范：当圆圈下降且直线继续时，动画分成两部分。 我们并不确定我们在批判性反思中讨论过的语法都能轻松表达这种动画，因为它既涉及场景动画，也涉及转场动画。

Gemini 的构图规则为支持枪杀动画所需的过渡提供了一条有希望的路径。 Gemini 的 concat 原语允许用户指定串行动画，而其 sync 原语允许用户指定并行播放的动画组件。 使用这些原语，我们可以指定一种同步，将动画分成圆和线，然后将枪杀动画的多个阶段连接在一起。 更一般地说，连接和同步允许用户将转换建模为串联图[48]。

然而，仅此抽象还不够。 虽然 Gemini 拥有丰富的过渡语言，但它无法像 Animated Vega-Lite 那样从数据自动生成关键帧。 这一生成对于枪支死亡动画可视化各个点是必要的。 将 Gemini 的 segue 抽象与 Animated Vega-Lite 的场景抽象相结合是表达动画未来有希望的方向。

7 结论和未来工作

Animated Vega-Lite 提供了低粘度、组合性和系统可枚举语法，统一了静态、交互式和动画可视化的规范。 在单一语法中，作者现在可以在快速原型制作过程中轻松地在三种模式之间切换，并将它们组合在一起以有效地交流和分析多方面和时变的数据。

我们的语法在帮助作者开发利用计算媒体的动态可供性的可视化方面迈出了有希望的一步。 在采访中，Pedersen 将统一描述为数据可视化 API 的“圣杯”： “图形语法定义了事物的外观，动画语法定义了事物如何反应，交互语法定义了事物如何交互。 将所有这些都纳入一个统一的理论框架中，那就太棒了。” 未来的工作可能会更深入地探索我们在过渡模型和关键帧模型之间提出的区别和权衡，或者研究反应式编程语义和数据流管理的较低级别的统一的含义。

除了语言设计之外，我们希望 Animated Vega-Lite 能够促进未来交互式和动画可视化方面的工作，类似于原始 Vega-Lite 所扮演的角色。 例如，我们如何利用 Animated Vega-Lite 枚举静态、交互式和动画可视化的能力来研究这些模式如何促进数据分析和通信——更系统地复制和扩展先前的工作[33]？ 同样，研究结果如何编入 Draco 知识库 [29] 中，或暴露在 Voyager [49, 50] 或 Lux [23] 等系统中 在探索性数据分析期间推荐动画可视化？ 为了支持这项未来的研究，我们打算将我们的工作贡献给开源 Vega-Lite 项目。