“让可视化动起来”的网页交互工具Interaction+

文章源自[可视分析]公众号的分享

也许你是一个可视化爱好者,你会发现在网络上能找到许多很漂亮的数据可视化,但同时你也可能会发现它们中的大部分并不能和你互动;也许你是一个可视化工程师,当你按照设计初步实现了一个可视化的工作时,却发现要让用户能灵活地与你开发的可视化工作进行交互,还需要巨大的代码工作量。

 

可视化不仅仅是对数据的静态呈现,灵活生动的交互是可视化的生命,但实现好的交互却不是轻而易举。较高的编写交互的门槛,使网络上许多可视化作品仍停留在有形无神的状态。

网页上琳琅满目的可视化工作
网页上琳琅满目的可视化工作

(图片来自https://github.com/d3/d3/wiki/Gallery)

最近北京大学可视化与可视分析实验室发布了一款“让可视化动起来”的网页交互工具Interaction+,它能让你不写一行代码就与网页上的各种各样的可视化进行交互。这些可视化可以是像纽约时报上那样的数字媒体新闻、博客财报中的各式各样的统计图表,也可以是d3.js编写的千奇百怪的可视化工作、艺术家制作的漂亮的信息图等。同题论文Interaction+: Interaction Enhancement for Web-based Visualizations已经被PacificVis 2017接收,实验室陆旻同学于近日在PacificVis会议上进行论文报告。

 

Interaction+的灵感来源于实验室对可视分析中的交互构建的逆向思考。常规的交互构建以数据作为驱动,与应用场景和开发环境紧密结合,由可视化的制作者嵌入到可视化作品中。对于可视化的使用者来说,一个可视化作品有没有、有什么样的交互功能是被规定的。这样的交互设计思路能很好地满足特定的应用下的交互需求,但由于交互与可视化的紧耦合,往往带来两个方面的问题:可视化的制作者开发交互时的复杂性及低复用性,和可视化的使用者使用交互时的被动性。

 

Interaction+的核心思想是在已有的可视化作品的制作流程之外,将交互的对象从常规的数据转移到视觉图元,支持用户在认知过程中对视觉图元的整理、查询、过滤等任务。具体而言,Interaction+从已有的网页可视化作品中获得其视觉图元及属性信息,并将其作为数据驱动,提供一套基础而完整的交互功能,让用户能在原可视化中进行选择、过滤、查询、比较、打标签等交互。

Interaction+交互构建核心思路
Interaction+交互构建核心思路

 

 

具体地,以网页上的既有可视化作为输入,Interaction+通过解析网页HTML文件物件模型 (Document Object Model) 获取可视化的视觉信息。HTML文件物件模型DOM对浏览器网页上元素按树形结构进行组织,每个元素被一个标识和属性列表描述。对于可视化中的视觉元素,其属性列表包含一系列外观描述,Interaction+通过解析DOM从原可视化中获得视觉信息。以视觉信息为驱动并链接原可视化中的视觉元素,实现原网页的交互。

网页HTML文件物件模型(Document Object Model)
网页HTML文件物件模型(Document Object Model)

 

具体操作时,用户打开任意一个网页,点击工具栏上的Interaction+按钮,Interaction+的工具栏会自动地加载在网页上,这样用户就可以对原可视化进行各种交互操作了。例如,用户直接圈选可视化中的感兴趣区域,Interaction+会自动检测所选区域的元素,并将其属性可视化在交互辅助面板中。在面板的辅助下,用户既可以在原有的可视化中直接标注、对比,也可以在辅助面板中进行过滤、重组等操作。

Interaction+ 基本交互界面
Interaction+ 基本交互界面

 

Interaction+是一种新型的交互构建方法,它主张在既有的可视化中通过交互增强的方式,对原有可视分析中的交互功能进行松绑。相比于当前主流的与可视化流程紧密耦合的交互构建方法,Interaction+具有以下特点:

  1. 轻量:独立于任何的可视化制作流程,Interaction+以轻量级的插件形式存在,不仅可能减轻可视化制作者对交互的开发,而且对于可视化使用者来说更是零压力安装;
  2. 适用广:由于对可视化流程及原始数据没有任何要求和假设,目前Interaction+适用于任何网页上的SVG可视化作品,可以是程序员编写的程序也可以是艺术家制作的信息图;
  3. 有效:Interaction+将原本极有可能需要在人脑中进行的图元操作显性化,提高了人对可视化作品的探索效率;
  4. 灵活:Interaction+提供包括选择、过滤、聚集、标注等一系列交互操作,满足不同的分析需求。

说了这么多,快看视频感受一下吧!点击文章下方的阅读原文,亲自来Interaction+试一试吧!