基于人物关系数据的沉浸式可视化交互系统设计与实现

阮若琳程明智田晓璇刘 龙杜 萌

(1.北京印刷学院 新媒体学院,北京 102600; 2.北京印刷学院 国际新媒体产教研融合研究院,北京 102600)

人物关系是人与人之间的联系,存在于文学作品、社会生活和网络环境中,对其进行数据可视化,有助于探索其中的隐含信息,帮助信息资源管理、推理与决策。[1]但当人物数量庞大、人物关系复杂时,二维的人物关系可视化产生的元素冗余、视觉遮挡等问题仍亟待解决。《红楼梦》作为我国四大名著之一,其复杂的人物关系向来是红学爱好者的研究重点,但二维的可视化技术展示信息有限,一定程度上无法满足人物关系的分析需求,视觉呈现效果仍需提高。

虚拟现实技术为数据可视化带来三维沉浸式的数据分析环境,拓宽了其交互方法的设计,使得沉浸式可视化及其交互成为现阶段的热门研究领域。Cordeil M等人[2]设计的ImAxes利用非模态化交互使用户可以直接操作可视化轴,并组合成复杂图表进行多元数据分析。但现阶段沉浸式可视化交互研究仍处于探索阶段,涉及到如触觉等多种人体感官的交互方式在当下的用例中并未充分展现,[3]迫切需求适用于各类数据分析的交互设计框架及多人协同交互方法。[4]

沉浸式可视化利用三维空间优势编码更多信息,借助多模态交互技术实现直观可感的数据操作与分析。因此本文旨在利用沉浸式可视化及其交互技术,创新树图、人物关系网络图及轨迹图设计,实现基于人物关系数据的沉浸式可视化系统,并将其应用在《红楼梦》的人物关系分析中,帮助用户理清作品脉络,实现高效的数据分析。

1 框架设计与系统分析

1.1 系统概述

系统利用虚拟现实技术,在沉浸式的环境中可视化《红楼梦》中重要人物的关系数据,应用沉浸式交互及多视图协同技术,探索沉浸式人物关系可视化设计及交互方法。图1展示了系统整体框架,分为家谱树图、人物关系网络图、人物轨迹图三部分。家谱树图展示贾、史、王、薛四大家族(下文简称“四大家族”)的人物关系;人物关系网络图可视化《红楼梦》原文出场人物频次最高的人物及其关系亲疏情况;人物轨迹图呈现贾宝玉、林黛玉、薛宝钗(下文简称“宝黛钗三人”)在大观园内的行动轨迹。另外,系统利用“刷选与链接”[5]技术实现多视图间的协同交互,便于用户进行联动分析。

图1 系统框架

1.2 数据获取与分析

本系统利用Python和手动筛选的方式处理《红楼梦》作品原文,获得四组人物关系数据,详细说明如下。家庭关系数据:搜集网络资料并整理四大家族人物关系网,将其存储为JSON数据文件,体现家族父子代关系。人物出场频次数据:基于Pandas检测《红楼梦》原文中各回目主要信息,得到人物名称关键字,进而设计for循环,依据人物名称完成对主要人物出场频次数据的统计。统计结果如表1所示。

表1 人物出场频次数据统计结果

人物关系亲疏数据:利用Gensim库来训练人物名称关键词得到词向量模型,统计角色间的相似度信息得到人物关系亲疏数据,以贾宝玉为例,数据统计结果如表2所示。

表2 人物关系亲疏数据统计结果(以贾宝玉为例)

人物轨迹数据:阅读《红楼梦》原文25-28回,对宝黛钗三人经过地点进行统计并存储在表格中,以第27回为例,统计结果如表3所示。

表3 人物轨迹数据统计结果(以第27回为例)

对以上四组数据进行整理与分析得出:家庭关系数据用于呈现四大家族人物关系;人物出场频次和人物关系亲疏数据可以结合呈现人物角色间的关系网络;人物轨迹数据可实现对宝黛钗三人在大观园中的行动轨迹可视化。

1.3 可视化方法设计

家谱树图设计思路来源于真实树形结构,每个人物节点由宝石模型表示,节点间的代际关系用三次贝塞尔曲线链接。突破平面限制,在三维空间中以树形结构呈现,家族各分支清晰明显,用户可自由选择分析角度,避免视觉遮挡。

在二维的人物关系网络图中,当人物角色众多、人物关系复杂时可能造成视觉冗余,影响数据分析。本系统将其拓展到空间维度,以颜色编码不同人物角色,以不同角度编码某一人物与其他所有人物间的关系亲疏数据,以色彩明度编码人物关系亲疏程度,明度高低与关系亲疏成正比。

人物轨迹图设计参考GeoTime可视化方法,[6]该方法可同时表现轨迹的时间和地理信息。系统沿X、Y轴放置大观园的沙盘模型,沿Z轴放置若干时间平面,根据人物轨迹数据将沙盘模型上的地理位置映射到时间平面上,利用三次贝塞尔曲线绘制人物行动轨迹。

2 系统开发与实现

2.1 场景搭建

系统在Unity中完成场景搭建,主体为中式古典书房,结合曹雪芹故居和《红楼梦》原文中古建筑的风格设计搭建。场景格局参考潇湘阁家具组合:书画案+圈椅+几,[7]为了方便用户在场景内的移动,在此基础上进行了删减与修改,保证用户操作流畅度,如图2所示。

图2 系统场景设计

2.2 数据可视化视图实现

家谱树图的实现由确定节点的空间位置和连接节点两步组成。由于数据节点较少,系统预先确定好节点位置并在层级面板中调整父子关系结构;利用LineRenderer绘制三次贝塞尔曲线完成父子节点连接,核心代码如下:

图3 家谱树图实现效果(以贾氏家族为例)

人物关系网络图的设计实现类似家谱树图连接数据节点一步,最终利用LineRenderer组件绘制,通过控制点的位置调整贝塞尔曲线绘制角度,核心代码如下:

图4 人物关系网络图实现效果

人物轨迹图的设计实现同样使用三次贝塞尔曲线绘制,以不同时间平面上人物所到地点为曲线的起始点、目标点,将多个点汇集成一个整体数组,完成读取并绘制出完整的行动轨迹。核心代码如下:

图5 人物轨迹图实现效果

3 数据可视化交互实现

3.1 单视图交互

系统单视图交互方式以选择、筛选为主,辅助以3D模型动画,方便用户跟踪目标数据进行分析。家谱树图:当用户选择某一数据节点时可以随意改变该节点及其所有子节点的空间位置,方便用户孤立查看家族分支,如图6所示。

图6 家谱树图交互示意图(红框处为手柄所选数据节点)

人物关系网络图:当用户选择某一人物节点时,孤立显示代表该人物与其他人物亲疏程度数据的曲线,并垂直显示在Z轴正方向,避免视觉混乱,方便用户查看,效果如图7所示。

图7 人物关系网络图交互示意图(以贾宝玉为例)

人物轨迹图:系统初始化状态时呈现《红楼梦》原文25-28回中宝黛钗三人在大观园中的行动轨迹,当用户选择某一时间平面时,播放以该时间平面为终止的轨迹动画。播放完毕后,将从人物角色所处空间位置沿Z轴负方向延伸出一条垂直辅助线,并高亮显示地图上的对应位置,效果如图8所示。

图8 人物轨迹图交互示意图

3.2 多视图协同交互

多视图协同交互作为数据可视化中的重要方法,可以帮助用户发现并评估数据中的多维关系,帮助数据决策。在以往允许多视图协同交互的系统中,交互技术可主要分为利用滑块和菜单来约束视图显示内容的间接技术和允许用户直接操纵可视化视图的直接技术。[8]本系统中多视图协同功能效果如图9所示,当用户在人物关系网络图中选择代表某一数据节点进行分析时,操作将链接到其余视图并执行筛选功能,家谱树图中对应人物的节点高亮显示,人物轨迹图中代表该人物的轨迹孤立显示,用户可以对该节点或轨迹执行进一步交互。

图9 多视图协同交互效果

4 结语

本文依据《红楼梦》原著信息,利用手动筛选和Python统计得出人物关系相关数据,并对其进行数据可视化设计。创新点如下:针对文学作品中人物家庭及社交关系实现沉浸式数据可视化;对数据可视化视图进行创新设计,利用虚拟现实交互技术延伸其设计维度,转平面为立体、化二维为三维,提高可视分析自由度;实现沉浸式多视图协同交互,进一步放大多视图协同针对同属性数据的多维分析能力,用户可以直观地对比分析多个数据,提高用户交互的流畅感和统一感。

在未来,将以多视图协同交互及多模态交互为主要方面进行进一步研究,分为以下几点:以数据可视化任务为指导,拓展系统的交互设计,探索包括“概览与细节”“焦点与上下文”等双视图交互模型[9]在系统中的应用,并进一步分析其在分析效率、操作时长等方面的优势与不足。