天秤座:数据可视化的交互模型

荣誉提名
交互式数据可视化时序数据与网络图可视化软件工程师与开发者UI/UX 设计师

研究背景与问题

  • 发现问题/挑战: 现有的数据可视化工具和库(如 D3 和 Vega)可以有效地重用和扩展静态可视化,但在支持交互操作的复用、扩展和组合性上存在明显不足,缺乏一致的软件模型来设计、复用、扩展和组合交互。具体表现为:
    • 缺乏模块化的软件架构使得交互开发过程复杂且难以管理。
    • 增强交互功能(如撤销/重做、直接操作、反馈等)在现有的大部分库中未被充分支持。
    • 现有工具封装交互方法的能力有限,导致开发者需自行管理复杂的状态和事件流。
  • 问题重要性: 数据可视化的交互对于吸引用户探索数据并获得有用的洞见起到关键作用。为交互提供模块化和复用支持将显著降低开发复杂性,并使交互设计可以像静态可视化设计一样被独立开发和共享。
  • 研究动机与相关工作:
    • 当前主流库(如 D3 和 Vega)在设计交互方面限制重用和扩展,交互的大部分开发停留在研究论文和原型阶段,难以进入实际生产或广泛使用。
    • 尽管一些系统(如 Prefuse 和 Improvise)引入了模块化的交互方法,但对于直接操作、布局服务及撤销/重做等高阶功能支持不足。Virgo等模型在高层次提出了交互逻辑,但未提供可实施的细节。
    • 当前也缺乏一个综合性的交互模型来支持描述、生成和评估不同的可视化交互。

解决方案

  • 方法或解决方案: 作者提出了一个新的交互模型——"Libra",该模型提供:

    • 一个清晰的方法来描述交互元素的组织 (e.g. 图层、交互工具等)。
    • 保持交互与可视化表示的分离,通过模块化设计支持复用、扩展和组合。
    • 支持实现更高级的功能,如撤销/重做和支持反馈/前馈的能力。

    并进一步实现了该模型的 JavaScript 原型 Libra.js。

  • 创新之处:

    • 分层架构:通过分离后台(数据和可视化图形层)与前台(选择图层、临时操作图层等),支持模块化和灵活的交互设计。
    • 交互工具 (Instruments):采用清晰的事件解释层和服务层,解耦低级事件处理(如鼠标事件)与高级交互(如选择、过滤等)。
    • 命令模式支持撤销/重做:所有交互操作被封装为规范化的命令以支持交互历史管理。
    • 前馈机制(Feedforward):结合撤销/重做支持,首次对可视化交互中的前馈做出规范支持。
  • 实施步骤与关键技术:

    1. 图层概念:引入四个主要图层(背景层、可视化主层、选择层、临时交互层),独立管理交互相关的可视化对象。
    2. 交互工具和服务:
      • 通过交互器 (Interactors) 将用户低级输入事件转化为高层行为。
      • 各类服务模块化地管理常见操作,如选择服务 (Selection Service)、布局服务 (Layout Service)、分析服务 (Analysis Service)。
    3. 反馈与前馈:图形变换器支持动态更新交互效果(例如选中高亮展示),并在必要时通过临时图层提供前馈。
    4. 组合与扩展:提供强大的 API,开发者可以通过插入(Insert)、覆盖(Override)、移除(Remove)等操作轻松扩展现有交互。

研究成果

  • 具体成果:

    • 提出了完整的 Libra 交互模型,为模块化交互设计提供清晰的规范。
    • 实现了 Libra.js,一个基于 JavaScript 的交互原型,支持快速复用现有可视化库(如 D3 和 Vega)的图形与功能。
    • Libra.js 提供了多个内置交互,如悬停、拖动、拖曳选择、平移缩放,并支持开发者的简单扩展。
  • 优势:

    • 模型的通用性:通过明确的组件结构和图层分离,开发者可跨越不同可视化库实现一致性交互。
    • 强大的复用性与扩展性:许多复杂交互案例(如动态查询、交互式透镜等)可以通过简单组合搭建完成。
    • 性能与灵活性:通过分层和增量式渲染策略,大幅提升了交互性能,并比 D3 提供更简单的交互配置方法。
  • 实验或评估结果:

    1. 定性与定量评估
      • 使用 26 项交互案例(涉及过滤、拖放、几何缩放等),对 Libra.js 相比原始 D3 和 Vega 在设计灵活性、表达能力上进行了考察。
      • Libra.js 可生成更短、更直观的交互代码(尤其是复杂交互)。
    2. 性能评估(交互帧率)
      • 在刷选、缩放交互场景中,与 D3 和 Vega 相比,Libra.js 展现了更快的性能,尤其是数据量较大时。
  • 局限性与未来方向:

    • 局限性:
      • 模型目前主要针对 2D 可视化,不适用于 3D 或 AR/VR 场景。
      • 学习曲线:尽管提供强大的功能,Libra.js 需要开发者花费时间理解其底层模型和 API。
      • 未指定互动器具体实现方式,可能导致部分开发者需要额外熟悉抽象设计。
    • 未来方向:
      • 扩展对 3D 和多模态交互(如语音、手势)的支持。
      • 支持多用户协作交互,为实时协同添加光标/视图的反馈。
      • 针对复杂机器学习任务,开发更多智能化的模块化服务。

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/papers/chi/189124/2025

广告推荐

学习 AI 编程到 CodeNow

open_in_new打开DOI链接
DOI: https://dl.acm.org/doi/10.1145/3706598.3713769
一眼看懂

论文快照

fact_check
dataset
来源
CHI
calendar_month
年份
2025
emoji_events
奖项
荣誉提名
group
作者
5 位作者
sell
研究子方向
交互式数据可视化、时序数据与网络图可视化
work
职业/产业
软件工程师与开发者、UI/UX 设计师
article
内容状态
已索引正文
hub
相关论文
10 篇相关论文