这是我在可用性研究中心担任助研工作的第三部分,为了解决场景还原中同个时间内存在多种场景(比如边吃饭边看视频)的情况,我尝试使用多层的环形图对一天的场景进行可视化。这部分工作大概是在2019年7月份左右进行,后续内容可能会有修改。

可视化工作——第三部分

1.任务描述

1.1数据简介
大连海事大学中国欧盟可用性研究中心(Sino European Usability Center)制作的可以安装在移动设备上的用户体验数据采集工具CAUX(content-aware user experience research),这个工具采集移动设备的运行状况(手机的电量、亮度、加速度、耳机接口、网络状况等),app使用情况(打开,退出,退回后台的时间等),通过日志法记录采集到的数据并录入数据库。

这部分的工作目标仍然是围绕师姐的研究课题——场景还原来进行可视化,根据师姐的描述,在移动设备上收集到的数据最终将会根据规律进行场景分类,分成比如游戏场景、购物场景、聊天场景等,而且根据师姐的解释,场景以颗粒度区分,可能会出现多个活动的场景(比如边吃饭边玩游戏),此时场景颗粒度较细,而单一活动的场景较粗。由于上一部分工作对于同一时间多个活动不能充分的展示,这部分工作采用了多层的环形图,解决了同一时间多个场景的可视化。由于场景分类数据处理工作在当时还未完成,故在JavaScript代码中手动分类模拟了一天的场景时间。

1.2可视化任务
单个用户在一天内场景分布情况的可视化,且对于同一时间的多种活动有效可视化。

2.工作概览

由于数据处理工作当时尚未完成,这部分工作可以分为数据模拟模块、数据处理和可视化模块:

  • 数据模拟模块即在JavaScript代码中根据模拟场景分类后的数据(包括场景名称,场景开始结束时间,场景内app使用及备注),代替了第一部分工作的数据存储和传输模块。
  • 数据处理模块即JavaScript中对于场景时间数据格式的转换、场景持续时间统计的计算。
  • 可视化模块即JavaScript中使用了蚂蚁金服可视化团队可视化库g2.js的代码段,这部分工作参考调用了g2.js官方示例中环状图,仪表盘的代码。

3.可视化方法和具体实现

对于这部分工作,由于本次时序可视化具有一定的周期性,且周期为一天,所以采用了多层的环形图去模拟一个24小时的时钟,更加符合人类对于时间的认识,更直观地显示场景处于在一天中的哪一个时间段。

环形图一般用来显示各部分的比例,但在这部分工作中,我使用了g2.js中的环形图接口和仪表盘接口,模拟了一个24小时的时钟,最外层的刻度表示一天中所处的时间,和环形图的外层代表了一天中的主要场景,当同一时间只存在一种场景时,此时的场景颗粒度较粗,当而内层代表了同一时间进行的另一种场景,层数越多的部分场景颗粒度越细。若是同一时间存在第三个场景,可以在内部继续添加环形图的层数。

当光标移动到环形图最外层的第一部分(“0/24”到”6:00AM”)时,提示框显示场景名称,所处时间段,时间统计以及时间占比。

4.工作遇到的困难

本次工作没有使用之前echarts.js,而是使用了更加灵活的g2.js,需要重新学习新的接口规则。在对于两种图表的结合使用,缺少学习资料,需要自己摸索试错。

对于可视化图表的的设计,需要进行不断的修改,在对于同一时间不同场景的时间数据格式有一定要求,本次工作只是模拟了相应的数据,后续应用还需要加工。

附 使用南丁格尔玫瑰图与环形图对于一天场景所占比例的可视化对比
可以看出玫瑰图中占比太小的部分会过小以至于难以观察,而环形图则没有这个问题。

南丁格尔玫瑰图
南丁格尔玫瑰图

环形图
环形图