论文标题:
Canis: A High-Level Language for Data-Driven Chart Animations
Author: T. Ge, Y. Zhao, B. Lee, D. Ren, B. Chen, Y. Wang
关键词:
可视化工具集、可视化信息、动态图表、JSON
主要内容:
动画为人们对静态事物的深层理解提供了一种有效的手段,帮助人们去建立事物之间的联系、认知关系、吸引用户注意、表达情绪等。因此动画经常被用于描述事物变化规律、展示状态切换及展开叙事过程。同时,动画也能让数据变得更加直观。
但是,目前的问题是,缺乏一种专门针对可视化动画、高效直观的构建方法。因此该文献提出了Canis,一种交互式可视化系统。该系统目的在于对动画进行简洁精确地描述,基于数据驱动地构建,以及探索一种直观自然的交互模式。
研究结果:
1. 文献综述:
从过往的研究可得出,可视化图表动画的有效性:
-
动画更容易让读者跟踪状态的改变
-
带有动画效果的散点图在趋势可视化中更为有效
2. 理论体系:
图表动画的设计空间:数据、图形、对象类型、时间
设计空间3. 现有方式:
现有的可视化创建方式主要有,
- 基于关键帧的工具(After Effect等)
a) 支持复杂生动的动画效果
b) 操作繁琐、准确率没有保障
- 基于模板的工具(Flourish等)
a) 方便使用
b) 无法定制化的图表动画
- 编程类工具(D3, gganimate等)
a) 基本上是对数学属性进行一个直接定义,缺乏对数据之间的联系
b) 数学逻辑较为复杂,对用户要求较高
c) 上述工具可以用于生成动画,但并不是专门针对动画而生
4. 存在问题:
-
缺乏对数据、视觉编码、时序三者关系的抽象、导致动画表达与数据感知的一致性得不到保障。
-
缺乏对动画的直观表达形式和自动化构建方法,导致动画过程较为复杂,交互繁琐。
-
缺乏直接的交互形式,导致用户的动画表达与交互实现之间存在较高的学习成本。
5. Canis设计逻辑
定义:
基于动画设计空间(目标、划分、时序、效果),数据驱动的声明式可视化动画编程语法。
目标:
-
有效性:可以轻松建立数据、视觉编码、时序三者之间的关系,以数据驱动的方式构建可视化动画。(侧重于数据结构)
-
平衡表现力和易用性:添加常用动画表现形式,优化动画编译及渲染过程(侧重于可用性和运行效率)
设计原则:
-
高级语法规范
-
简单明确的语法,基于json逻辑,用户只需要定义要做什么,不需要去定义如何去做,避免繁琐数学逻辑
-
清晰的层次结构
-
基于树形结构,对图元进行分组管理和动画时序进行定义(下文有图)
-
-
支持跨平台应用
- 支持跨平台,提高适用性和实用性
结构:
1.输入数据——》2. 编译过程——》3.输出
1.输入数据
- 在svg数据里,嵌入数据结构信息,生成dsvg数据。如下:
-
数据描述:
-
具体写法
写法
-
-
结构关系
结构 -
样例数据
样例 -
核心属性
-
Selector:选择动画单元中所涉及的图元
- “selector”:“.dot”
-
Grouping: 将图元按照数据属性进行层次化划分,并依据分组定义图元动画的时序顺序(基于x、y轴进行划分)
- 写法 写法示例
- 编译后结果如下 结构
-
Effect:每个动画图元可以绑定动画效果
- 效果展示
-
2. 编译
-
顺序:Parse——》Build——》Bind——》Evaluate——》Translate
-
Parse:纠错,补充默认值
-
Build:划分图元、生成图元树形结构
-
Bind:使用视觉属性描述动画效果,并绑定至图元单元
-
Evaluate:计算图元单元的动画时间
-
Translate:转移为Lottie编码。在这部分里,利用静态+动态模板数据,为重复性极高的动画代码进行简化。
-
3. 输出数据
- Lottie编码(优势:支持多平台本地渲染,动画体积更小,渲染效率高)
6. 在线测试:
https://chartanimation.github.io/canis/gallery.html
对设计的启示:
-
在数据处理过程中,除了数据本身之外,还可以进一步利用其结构化数据,方便管理,同时更为清晰易懂。像城市数据、建筑数据,都慢慢地向结构化数据进行靠拢(例如,城市网格管理,省、市、区、街道、具体网格数值)
-
理清晰了对于时序数据而言的重要参数(层次结构+起始顺序)
-
树形结构数据的在可视化中的应用
局限与不足:
-
编译:一旦某一部分的数据更新了,会代码需要全局重新编译,导致计算效率下降。
-
语法:对于编码相同的数据,并不能实现复用,需要重新写入。例如折线图中,点与点之间的动画也具有较强的相关性,但是在Canis中缺乏定义时序相关性的语法。目前只能分别定义两类图元动画,之后进行手动对齐。
-
应用:创作过程中的可理解性较差,用户只能点击预览去看全局状态。同时,下上述中aniunits里面的selector、grouping划分机制,也需要用户按照自顶向下的思路进行编写,需要考虑比较周全才能开始编写。
网友评论