美文网首页
[总结] Canis: A High-Level Languag

[总结] Canis: A High-Level Languag

作者: alphonseLin | 来源:发表于2021-07-15 15:21 被阅读0次

    论文标题:

    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数据。如下:
    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

    对设计的启示:

    1. 在数据处理过程中,除了数据本身之外,还可以进一步利用其结构化数据,方便管理,同时更为清晰易懂。像城市数据、建筑数据,都慢慢地向结构化数据进行靠拢(例如,城市网格管理,省、市、区、街道、具体网格数值)

    2. 理清晰了对于时序数据而言的重要参数(层次结构+起始顺序)

    3. 树形结构数据的在可视化中的应用

    局限与不足:

    1. 编译:一旦某一部分的数据更新了,会代码需要全局重新编译,导致计算效率下降。

    2. 语法:对于编码相同的数据,并不能实现复用,需要重新写入。例如折线图中,点与点之间的动画也具有较强的相关性,但是在Canis中缺乏定义时序相关性的语法。目前只能分别定义两类图元动画,之后进行手动对齐。

    3. 应用:创作过程中的可理解性较差,用户只能点击预览去看全局状态。同时,下上述中aniunits里面的selector、grouping划分机制,也需要用户按照自顶向下的思路进行编写,需要考虑比较周全才能开始编写。

    相关文章

      网友评论

          本文标题:[总结] Canis: A High-Level Languag

          本文链接:https://www.haomeiwen.com/subject/buoppltx.html