VisFlow – 针对表格的子集数据流模型web可视化框架(Web-based Visualization Framework for Tabular Data with a Subset Flow Model )

在可视化中,数据分析是一个典型的需要交互过程,在这个过程中即需要对于数据的可视化展示同时也需要对于数据交互的查询。数据分析通常都是从对于数据的全局概览开始,然后逐步的深入到数据子集中,直到这个数据子集能够解答用户想要探索的问题。数据探索过程是基于数据的属性进行的,因此辅助数据探索的工具需要足够灵活并且支持用户自定义的探索过程。因此,本文[1]提出了子集数据流模型的web可视化框架VisFlow,通过提供迅速的交互反馈,数据筛选以及视图链接,大大提高了在数据探索与交互查询过程中的交互能力。同时本文实现了以VisFlow框架为基础的原型系统,并且通过case study来验证VisFlow系统的有效性。

目前存在很多基于数据流的系统,但是这些系统对于数据的可视分析都有很多问题;一部分数据流系统针对数据的计算与处理进行设计,这些系统的输入与输出对应的是程序的参数以及返回值,因此使用这些系统需要用户具有一定的编程背景;另一部分数据流系统并不是针对可视化进行设计,这些系统所得到的大部分都是数据的统计信息,并不支持交互的数据探索;针对可视化设计的数据流系统主要的目的是产生渲染的流程,在这些系统中,交互通常有限并且仅仅针对的是对于渲染视图的浏览。因此为了支持用户在可视分析系统中动态的查询以及自适应的分析过程,本文提出了VisFlow框架,支持用户以可视的方式直接自定义数据分析流程从而帮助用户的分析。

VisFlow中的数据流模型

1. 数据;VisFlow针对的是表格类型的数据,表格类型的数据

本文的工作针对的是表格类型的数据格式。表格类型数据的特点是表格中的每一行是数据集合中的一项,同时一组数据作为全体数据集合的一个子集。表格类型的数据可以分为两种类型,第一种类型,表格中的每一行是数据集合中的一项,不同的数据项之间相互独立,没有明显的关联;第二种类型,表格中的每一项可以看做是一个序列数据中的一个点,不同的序列数据之间存在关联,比如时间先后顺序等。

visflow-tableau data图1 VisFlow表格数据;(a)为数据项之间不存在关联的表格数据(b)数据项之间存在时间先后顺序,每一个数据项是time-series中的一个点

2. 流程图;节点,端口,连接边三部分组成

VisFlow中的流程图是由节点,端口,连接边三部分组成的一个有向无环图(DAG)在流程图中传递的数据主要分为两类,一类是子集数据,集合内部的元素即为全集中的任意项。另一类是常量数据,该数据集合主要由常量元素组成,主要的目的是用于按照用户的意愿进行数据集合的筛选,比如说只选择属性name中带有”amc”字符串的项。

visflow-flow-diagram图2 VisFlow流程图;视图包括全部的ViaFlow的节点类型,包括数据源,可视化节点,数据生成器节点,筛选器节点,属性绑定器节点,集合操作节点六类。

3. 节点类型

如图1所示为流程图的样例视图,在流程图中的节点类型主要分为以下几类:

  1. 数据源。从数据文件中加载源数据,数据源类型的节点没有数据的传输入口,并且通常只有一个单独的数据出口。
  2. 可视化。可视化节点使用预先设定的可视化组件对于数据进行可视化,系统中提供的可视化节点有散点图,平行坐标,柱状图等形式。
  3. 数据生成器。数据生成器生成常量的数据用于对于子集数据的筛选。
  4. 筛选器。筛选器进行数据的筛选,比如定义属性的某一范围进行筛选。
  5. 属性绑定器。属性绑定器将数据的某一个属性映射在可视化中的channel上面得到相应的可视化结果。
  6. 集合操作。集合操作主要是对于传入该节点的不同集合进行交,并,补等集合操作,从而得到准确的可视化数据集合。

4. 交互

VisFlow支持brush以及link的操作。在传统的可视化中,brushing-linking交互操作是最为常用且有效的交互操作之一,同时,brushing-link在可视化系统的实现中也是相对最为复杂的一部分。在VisFlow系统中,brushing-linking交互操作可以自然地被支持,因为在不同视图中所渲染的是全集-子集的关系,每一个节点背后所绑定的数据是一致的,因此对于某一部分数据进行高亮等交互操作会自动地与其他的视图相链接。

5. 异构数据

VisFlow系统支持对于异构类型的数据进行组合并且进行可视化,比如gaph类型的数据包含数据节点以及节点的连接边,VisFLow支持将两类数据同时传入进行渲染得到graph的可视化结果,vis-diagram如图所示。

visflow-graph-diagram图3 异构数据(graph)的FlowDiagram设计

VisFlow框架

本篇文章开发了VisFlow框架的原型系统,实现了数据流模型展示该应用。原型系统在网站上面能够被访问,同时源代码在github上面进行开源。

1. 用户界面

VisFlow框架的用户界面如下图2所示,主要分为三部分,Node Creation Panel,Diagram editing canvas,Node control panel. VisFlow中的节点提供可视化细节或者图标等不同的展示方式进行表达,使用图标缩略方式进行展示能够大大减小占用的屏幕空间。用户可以通过拖拽Node Creation Panel中的组件在Diagram Editing Canvas界面中进行可视化系统的组织;在Diagram Editing Canvas界面上点击可以在Node Control Panel视图中进行对于该节点具体的设置。

visflow-userinterface图4 VisFlow原型系统界面;Node creation Panel;Diagram Editing Canvas;Node Control Panel组成

2. 可视化模式

在用户界面的上方存在Floating Tool Panel用来对于可视化状态的切换,存在Diagram Editing状态以及Visualization状态,在Visualization状态中仅仅保留在Diagram Editing中的可视化部分,对于所编辑的其他类型的节点进行隐藏,比如filering节点,用来表示数据流的节点连接边等部分。

3. 重用性

VisFlow原型系统支持对于编辑的flow-diagram的重用,用户可以将设计的可视化流程保存在服务器,另外的用户可以直接加载服务器端的flow-diagram。VisFlow并且支持多个用户进行合作编辑完成同一个flow-diagram。

4. 计算复杂度以及实现方式

VisFlow原型系统避免了冗余的数据存储以及重复的运行来保证系统的效率。多个视图背后所绑定的数据都是同一个数据集合,在内存中保存的仅仅是数据的行号作为数据的ID,因此避免了数据重复存储。VisFlow框架使用服务器-客户端的结构,客户端在用户的浏览器中进行渲染,服务器端提供数据的获取,存储以及加载存储的fow-diagram的设计。在客户端的渲染主要是通过D3以及SVG完成。

Case Study: Gene Regulatory Network Analysis

在生物学中,基因之间存在不同类型的关系,分析基因之间的关系是一个非常重要的任务,比如基因激活的关系等是一个非常重要的方面。生物科学家使用节点-链接图来描述基因之间的关系是一个非常重要的方式。在之前的工作中,生物科学家需要针对不同类型的数据写数据处理的脚本程序,获取数据,然后使用现有的可视化方式对于处理得到的数据进行可视化展示,在这个过程中需要分析人员有一定的编程背景,同时不同类型的数据需要不同的数据处理脚本,方法不具有普适性。然而在VisFlow工作中,只需要将数据进行导入,用户可以对于数据分析过程进行自定义。当前用户同样可以从服务器端加载定义好的分析流程(无需自己重新的编辑flow-diagram)。使用的可视化分析流程如下图所示。

visflow-userstudy图5 Case Study系统界面(i)Visflow用于基因关联分析的Flow-Diagram(ii)对应生成的可视化形式

局限性

  1. VisFlow采取的是给予子集数据流的模型,因此对于很多类型的数据分析并不支持,比如聚类分析,聚合分析等。
  2. VisFlow中所编辑的Flow-Diagram要求是一个有向无环图(DAG),因此无法对于数据进行循环地分析。
  3. 由于在VisFlow中数据流的单向性,在用户交互的方面不支持多个视图之间重复的筛选。

结论

VisFlow构建了一个针对表格数据的可视化框架,该可视化框架是基于子集数据流模型完成,并且实现了一个网页端的VisFlow框架的原型系统,该原型系统支持用户的编辑Flow-Diagram,同时本文使用在生物科学领域的基因分析以及对于网球比赛的分析论证了系统的有效性以及可用性。

 

参考文献:

[1] Bowen Yu and Claudio T. Silva.VisFlow – Web-based Visualization Framework for Tabular Data with a Subset Flow Model IEEE Transactions on Visualization and Computer Graphics, 2016 (to appear)

 

评论关闭。