这是我在可用性研究中心担任助研工作的第一部分,在研究生前辈的指导下,我尝试使用可视化技术对于实验室数据库的一部分数据进行小规模的可视化。

可视化工作——第一部分

1.任务描述

1.1数据简介
大连海事大学中国欧盟可用性研究中心(Sino European Usability Center)制作的可以安装在移动设备上的用户体验数据采集工具CAUX(content-aware user experience research),这个工具采集移动设备的运行状况(手机的电量、亮度、加速度、耳机接口、网络状况等),app使用情况(打开,退出,退回后台的时间等),通过日志法记录采集到的数据并录入数据库。
这部分工作目标是基于app各种状态的时间点对用户的app使用情况进行可视化。结合本部分工作的分析目标,提取了”2018-03-23”和”2018-03-24”这两天的状态时间,状态信息,应用名称,由于只是对于可视化技术的尝试性使用,只涉及到了这两天的137条数据。

1.2可视化任务
单个用户的app使用行为分析:
(1)用户在某个周期内(周/月/年)的对于单个app的使用频率/时间的可视化
(2)用户在一天内对于单个app使用情况的可视化
(3)以上两者可以进行联系,在观察员观察对周期内某一天的数据感兴趣时可以查看当天详情

2.工作概览

这部分工作可以分为数据存储模块、数据传输模块、数据处理和可视化模块:
数据存储模块采用了mysql数据库进行存储;
数据传输模块即在php文件内连接数据库,接收前台html页面传入的关键字生成SQL语句在数据库里进行检索,并通过json文件将检索结果发送到html页面,其中的JavaScript代码段使用Ajax接受json文件中的数据;
数据处理模块即JavaScript中对于app状态时间数据格式的转换、app状态持续时间统计、app使用频率/总时间计算的代码段。可视化模块即JavaScript中使用echarts.js的代码段,这部分工作参考调用了eharts.js官方示例中的热力图和自定义图的代码。

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

对于任务1,使用热力日历图进行实现;对于任务2,采用了甘特图进行实现;对于任务3,实现方法是:在对热力日历图中的某一天数据点击时,将其日期值传到网页url并进行刷新,刷新后网页读取到网页url栏日期值,显示相应日期的甘特图。

3.1热力日历图
热力图主要通过颜色去表现数字的大小,并通过图例来帮助研究人员理解和筛选所需要显示的数据。而热力日历图这是将热力图与日历相结合,进行一段时间内时序数据的可视化,通过对一整年数据的同时展示,希望研究员能发现其中周期性的规律。在这里我们采用了颜色来表现用户在当天对于”微信”app使用的频率,使用频率越高,颜色越接近深红色,频率越低,颜色越接近浅黄色。由于我们只抽取了两天的数据进行小规模实现,图中只有2018-03-23和2018-02-24这两天有显示,其中23号的频次是26,24号的频次是1。当光标移动到相应的日期时,会出现提示框显示相应的频次。

日历热力图
日历热力图

3.2甘特图
甘特图(gantt charts)又称为横道图,条状图,通过横着条状来显示和时间相关的项目随着时间变化的情况。在这个工作中我们使用纵轴显示app的名称,横轴显示时间的甘特图来对任务2进行时序数据可视化。如图,为某一用户在2018-03-23当天的“微信”app使用情况。由于只是对单一app进行可视化,故纵轴只有“微信”一项,横轴为时间,其区间为当天的0:00到当天的24:00(第二天0:00)。考虑到凌晨睡觉时间段app次数使用极少,以及其他时间段单次app使用持续时间较短,为了防止显示大面积空白和因持续时间过短导致条状过细使得研究人员错漏数据的情况发生,将初始化显示的时间段设置为7:12-12:00(30%-50%),并在下方设置数据区域缩放,研究人员可以通过鼠标滚轮缩放,通过拖动缩放条调整查看的时间区间。当光标移动到相应的条状图形是,会出现提示框显示app名称和本次使用持续时间。

甘特图
甘特图

4.工作遇到的困难

4.1 对于可视化工具的不熟悉,之前采用的是python里的pyecharts包(提供了echarts.js的python接口)进行数据可视化并发挥python对于数据处理的优势,但由于对于pythonWeb框架的不熟悉导致进度受阻,后续采用了php进行web后端建设,并将数据处理模块的工作放到JavaScript中进行,一方面需要处理的数据不多,另一方面可以直接调用echart.js进行数据可视化,只需要关注于JavaScript代码的编写即可实现可视化。
4.2 对于mysql,php,ajax,jquery.js,echarts.js的学习和运用,由于甘特图是使用自定义实例代码修改而成的,学习资料较少,需要仔细阅读官方文档。
4.3 数据格式处理
(1) 一开始出现数据无法可视化成功的情况,后续通过对每个字符串都进行输出发现,由于数据库的时间类型(datetime)在JSON文件中会被转换为字符串,且与echarts中所要求的时间字符串格式不一致。再调用echarts.js进行可视化之前需要人为地转换为时间戳格式再计算转换为符合格式要求的时间字符串格式。
(2) 对于持续时间的计算,需要将JSON中的字符串格式转换为时间戳格式,相减之后再换算显示成”XX小时XX分钟XX秒”。