人类的日常行为中，时间是无所不在的标尺。在当今数据剧增的时代，人们活动产生了大量的数据，其中就包含涉及状态变化的时间序列数据。人们往往希望从时间序列数据中得到数据随着时间变化的模式，但是通过肉眼观察大量数据时很难从中快速得到有效信息。
可视化将数据抽象为图表的形式，帮助人们理解晦涩难懂的数据，并通过交互发现隐藏在数据中的知识。比较常见的可视化形式包括折线图、圆饼图、散点图以及最近出现的交互性比较强的桑基图、树图等。不同的可视化展现形式适用于不同特性的数据。可视化技术在展示时间序列数据方面已经取得了卓越的成果，例如曲线图[1]、桑基图[2]、平行坐标[1]、管状图[3]和螺旋图[4]等。其中螺旋图是可视化中展示周期性时间序列数据的一种重要的形式。螺旋图通过连续的螺旋线能够展现数据在时间上的连续性以及不同时间周期上的变化规律，因此其在处理周期性连续数据领域得到了广泛的应用。
阶段性时间序列数据类型是一种比较特殊的数据类型，它描述了一个事件的状态随着时间的变化。一个事件从起始时间到结束时间，一共包含n个状态，事件顺序地从状态1转换到状态n。从状态i转换到状态i+1的过程称为阶段i，并且该过程存在pi条可达路径。对阶段性时间序列数据可视化需要满足以下要求：1) 有效地展示状态转换过程中时间的变化；2) 良好的交互，为用户进行各个阶段的路径选择提供决策支持；3) 在有限的空间中展示可扩展的时间长度；4) 在保证数据可靠性的前提下满足人们审美需求。
本文所研究数据的重要特征是：状态转换之间的路径耗时具有不确定性，而已有的可视化方法，如平行坐标、桑基图等不能有效展示可扩展的时间轴。而且平行坐标与桑基图是以一条时间轴表示一个状态，状态之间的连线表示可达路径，那么当某个路线历时很长时必然会导致与之相关的时间轴加长，这显然不符合可视化简洁美观的审美要求。
本文提出了一种全新的螺旋图可视化方法展示阶段性时间序列数据，采用圆环与螺旋线结合的方式，能够有效展示事件状态随着时间的变化，解决了时间序列长度对空间消耗的不确定问题，而且理论上在有限的空间能够展示任意时长的路径。
1 相关工作螺旋图广泛应用于表示周期性变化的时间序列数据。Carlis等[5]给出了一种可视化周期性时间序列数据的新型可视化形式，并介绍了几个螺旋可视化的实际应用。不同的可视化样式可以以螺旋图的样式排列布局在图表上，比如墨点图、三维环图和柱状图，这些实体的大小表示数值的大小。Cheng等[6]提出一种新颖的极平行坐标的方式可视化时间序列数据，并与传统平行坐标进行比较。极平行坐标可以展示更多的坐标，而且可以有效地展示时间序列数据的周期性特征。Hewagamage等[7]采用3维(3 Dimensionality，3D)耳轮式螺旋形式在3D地理图上展示时空性数据。Dragicevic等[8]提出一种新型的可视化展示即将发生事件的方式——SpriaClock(螺旋时钟)，它结合了螺旋图和时钟表现形式，能较好展示时序发生的一系列事件。Tominski等[9]提出使用双色调伪着色(Two-Tone Pseudo Coloring, TTPC)编码方式对螺旋图颜色编码，使得数值对于用户更加清晰可辨。Weber等[4]使用线条与颜色对时序性数据编码，当数据量较大时提出使用3D耳轮式螺旋展示数据。Buelens[10]提出使用螺旋图可视化显示周期性266天日斑数量。Walker等[11]对已有的时序数据可视化方法进行了分析比较，提出了一个新的扩展方式并应用于含有大量时间属性的传感器数据可视化上。
2 可视化设计本章介绍螺旋模型的设计方案，其中符号如表 1所示。
|
表 1 状态设计符号说明 Table 1 Character demonstration of status design |
本节描述状态圆环的可视化设计方案。设计步骤为：
第1步 单个状态可视化设计(2.1.1节)；
第2步 圆环时间轴可视化设计(2.1.2节)；
第3步 状态集可视化设计(2.1.3节)。
本节符号说明如表 1中状态设计模块所示。
2.1.1 单个状态可视化设计事件的每一个状态由一个圆环表示，圆环的一周表示一个时间周期，根据实际情况，周期的粒度可以是任何长度的时间，如一小时、一天和一个月等。
图 1展示了状态si的设计示例，是以o为圆心，ri为半径的状态si，弧度θ反映周期T中的一个时间段
|
图 1 状态si设计示例 Figure 1 Example of status si |
如图 2所示，状态i的周期为T，T可以表示一天、一个月或者一年等。按照人们日常的习惯，以坐标(xo, yo+r)表示周期的起点，从起点按顺时针方向旋转弧度θ的点为(xθ, yθ)，则(xθ, yθ)所在位置表示的时刻t为
|
图 2 状态圆环周期可视化设计 Figure 2 Design of status cycle visualization |
| $ \theta {\rm{ = }}\frac{t}{T} * 2 * \pi $ | (1) |
设圆心o的坐标为(xo, yo)，状态si的外半径为ri，则(xθ, yθ)由极坐标方程表示如式(2) 所示:
| $ \left\{ {\begin{array}{*{20}{c}} {{x_\theta } = {x_o} + {r_i} * \cos \left( {5/2 * \pi-\theta } \right)}\\ {{y_\theta } = {y_o}-{r_i} * \sin \left( {5/2 * \pi-\theta } \right)} \end{array}} \right. $ | (2) |
由此得时刻t对应位置(x, y)的关系，如式(3) 所示:
| $ \left\{ {\begin{array}{*{20}{c}} {x = {x_o} + {r_i} * \cos \left( {2\pi * \left( {5/4-t/T} \right)} \right)}\\ {y = {y_o}-{r_i} * \sin \left( {2\pi * \left( {5/4-t/T} \right)} \right)} \end{array}} \right. $ | (3) |
状态集S中的每个状态si按照时间先后顺序排列，状态圆环的半径集R中的半径ri对应状态si，ri在集合中按大小升序排列。所有状态在展示时使用同一个圆心，每个状态si对应颜色集Color中的颜色colori。状态集S的可视化设计如图 3所示。
|
图 3 状态集S可视化为一组同心圆 Figure 3 Status set S is visualized as a set of concentric circles |
本节主要描述路径的可视化设计，步骤如下：
第1步 路径线路设计(2.2.1节)；
第2步 路径颜色设计(2.2.2节)；
第3步 路径透明度设计(2.2.3节)。
其中本节符号说明如表 1中路径设计模块所示，其中阶段i表示状态si转换到si+1状态的过程。
2.2.1 路径线路设计本节描述路径路线可视化设计，包括以下4个方面：1) 求得线路的起点与终点位置；2) 设计线路子线条个数；3) 设计子线条样式；4) 完成子线条绘画，即得路径线路。路径lik完成从状态si到状态si+1的转换，其起始端点位于圆环si上，终止端点位于圆环si+1上。由式(1)，lik在起始状态si上的位置用弧度表示如式(4) 所示:
| $ Sradia{n_{ik}} = 2\pi * \left( {5/4-startTim{e_{ik}}/T} \right) $ | (4) |
在终止状态si+1上的位置用弧度表示如式(5) 所示。
| $ Tradia{n_{ik}} = 2\pi * \left( {5/4-arriveTim{e_{ik}}/T} \right) $ | (5) |
由式(3)，螺旋线段lik的起始位置(Sxik, Syik)如式(6) 所示:
| $ \left\{ \begin{array}{l} S{x_{ik}} = {x_o} + {r_i}*\cos \left( {Sradia{n_{ik}}} \right)\\ S{y_{ik}} = {y_o}-{r_i}*\sin \left( {Sradia{n_{ik}}} \right) \end{array} \right. $ | (6) |
螺旋线段lik的终止位置(Txik, Tyik)如式(7) 所示:
| $ \left\{ \begin{array}{l} T{x_{ik}} = {x_o} + \left( {{r_{i + 1}}-arcWidth} \right)*\cos \left( {Tradia{n_{ik}}} \right)\\ T{y_{ik}} = {y_o}-\left( {{r_{i + 1}}-arcWidth} \right)*\sin \left( {Tradia{n_{ik}}} \right) \end{array} \right. $ | (7) |
该条螺旋线旋转的弧度大小如式(8) 所示：
| $ \Delta radia{n_{ik}} = ({t_{ik}}/T) * 2\pi $ | (8) |
螺旋线具有随着弧度的增加，半径也随之增加的特点，而且一条螺旋线段的绘制，是采用多段子线条分段绘制，子线条的粒度决定了螺旋线的光滑度。本文中每段子线条的角度为1°，那么螺旋线lik的segmentik值如式(9) 所示:
| $ segmen{t_{ik}} = \left( {{t_{ik}}/T} \right) * 360 $ | (9) |
螺旋线lik的子线条集Segik中每个元素segikj(j=1, 2, …, segmentik)都是以o为圆心的一段椭圆弧。根据螺旋线lik的绘图过程中半径逐渐增加的特点，可知，椭圆弧的半短轴与半长轴集合SegRik是一个等差数列，其首元素segRik1的值是R中的元素ri，尾元素为(ri+1-arcWidth)。Δri如式(10) 所示:
| $ \Delta {r_i} = {r_{i{\rm{ + }}1}}-arcWidth-{r_i} $ | (10) |
等差数列SegRik的公差如式(11) 所示:
| $ \Delta {r_{ik}} = \Delta {r_i}/segmen{t_{ik}} $ | (11) |
根据式(8)，螺旋线lik所经弧度为Δradianik，则每个线段segikj的弧度Δaglikj如式(12) 所示:
| $ \Delta ag{l_{ik}} = \Delta radia{n_{ik}}/segmen{t_{ik}} $ | (12) |
根据式(11)，椭圆线段segikj的半短轴aikj与半长轴bikj如式(13) 所示:
| $ \left\{ \begin{array}{l} {a_{ikj}} = {r_i} + \Delta {r_{ik}} * \left( {j-1} \right)\\ {b_{ikj}} = {r_i} + \Delta {r_{ik}} * j \end{array} \right. $ | (13) |
由式(12) 和(13)，椭圆线段segikj的终点位置(Txikj, Tyikj)即segik(j+1)的起点位置如式(14) 所示:
| $ \left\{ \begin{array}{l} T{x_{ikj}} = {x_o} + \left( {{r_i} + \Delta {r_{ik}} * j} \right) * \\ \;\;\;\;\;\;\;\;\cos \left( {2\pi *\left( {5/4-t/T-j * \Delta ag{l_{ik}}} \right)} \right)\\ T{y_{ikj}} = {y_o}-\left( {{r_i} + \Delta {r_{ik}} * j} \right) * \\ \;\;\;\;\;\;\;\;\sin \left( {2\pi *\left( {5/4 - t/T - j * \Delta ag{l_{ik}}} \right)} \right) \end{array} \right. $ | (14) |
路径螺旋线设计中各个参数含义如图 4所示。
|
图 4 路径螺旋线参数示意图 Figure 4 Parameter schematic diagram of path spiral |
特别地，当Δradianik＞2π，表示路径lik历时tik超过T，那么螺旋线绕圆心超过一周。
定理1 无论螺旋线路径经历时间t几倍于T，都可以在有限空间的圆环内完成螺旋线的绘制。
根据定理1，在T＜tik＜2T时，螺旋线lik如图 5所示。
|
图 5 时间周期超过T的螺旋线 Figure 5 Spiral with period longer than T |
为了得到较为美观的可视化展示效果，根据路径lik的类型typeik，设置其颜色colorik如式(15) 所示。
| $ colo{r_{ik}} = (colo{r_{i + 1}}-colo{r_i}) * p\_typ{e_{ik}} + colo{r_i} $ | (15) |
其中，p_typeik表示typeik映射到区间[0, 1]的数值。效果如图 6所示，根据路径类型的不同，设置为不同颜色，如含有圆点和含有椭圆点的螺旋线的不同。
|
图 6 路径颜色过渡 Figure 6 Transition of path color |
当对大规模数据进行可视化时，元素之间的交叉和遮盖是一个不容忽视的问题。根据概要+细节的概念，本节根据路径的交叉点个数设置路径的透明度，其中涉及到的符号说明如表 1中透明度设计模块所示。
阶段i存在pi条可达路径，每条路径lik的长度不等，当pi较大时，路径之间必然会产生大量的遮盖以及大量的交叉点。本文通过识别出与其他路径具有大量交叉点的路径lik，并对其进行提高透明度的操作来优化可视化显示的效果。由于lik表示从状态si到状态si+1的变化过程，判断lik与lip是否具有交叉点的算法如式(16) 所示:
| $ flag = \left\{ \begin{array}{l} 1, \;\;\;\;\;startTim{e_{ik}} + {t_{ik}} > startTim{e_{ip}} + {t_{ip}}\;\, {\rm{and}}\, \\ \;\;\;\;\;\;startTim{e_{ik}} < startTim{e_{ip}}\;\;或\\ \;\;\;\;\;\;startTim{e_{ik}} + {t_{ik}} < startTim{e_{ip}} + {t_{ip}}\, \;\;{\rm{and}}\, \\ \;\;\;\;\;\;startTim{e_{ik}} > startTim{e_{ip}}\\ 0, \;\;\;\;其他 \end{array} \right. $ | (16) |
其中：flag=1表示lik与lip有交叉点，flag=0表示lik与lip没有交叉点。
根据式(16) 得到lik的crossNumik。lik的透明度transpik采用关于crossNumik的长尾公式(17) 求解:
| $ trans{p_{ik}} = k/crossNu{m_{ik}} + c $ | (17) |
设阶段i最大透明度为transpMaxi, 最小透明度为transpMini，阶段i路径的交叉点个数最大为crossNumMaxi，最小为crossNumMini，则阶段i长尾函数的系数k，c如式(18) 所示:
| $ \left\{ \begin{array}{l} k = \frac{{\left( {transpMi{n_i}-transpMa{x_i}} \right) * crossNumMi{n_i} * crossNumMa{x_i}}}{{crossNumMa{x_i}-crossNumMi{n_i}}}\\ c = \frac{{transpMa{x_i} * crossNumMa{x_i}-transpMi{n_i} * crossNumMi{n_i}}}{{crossNumMa{x_i} - crossNumMi{n_i}}} \end{array} \right. $ | (18) |
该透明度算法具有使低交叉数的路径透明度低、使高交叉数路径透明度高的特点，且当交叉数较高时透明度能够平缓升高并稍低于最小值transpMaxi，能够给用户提供美观、简洁的效果并且尽可能地保留数据信息。效果如图 7所示，可以看出含有圆点的螺旋线与含有椭圆点的螺旋线的透明度明显不同。
|
图 7 路径透明度设计 Figure 7 Design of path transparency |
一个圆环表示状态si，圆环的一周表示状态的时间周期T, 为了便于用户观测数据，T可根据实际情况均匀地分为m段。在圆环上表现为m段圆弧，用户可以通过将鼠标移至圆弧上筛选出起始时间处于这段圆弧上的路径，此时未被选中的路径透明度升高，如图 8(b)中所示，选择17~20时间段的圆弧，即带圆点的圆弧，而在此时间段内起始的螺旋线，即带椭圆点的螺旋线，高亮显示。
|
图 8 路线筛选效果 Figure 8 Result of path filtering |
用户移动鼠标至路径lik，lik高亮显示，且出现弹框显示这条路径的详细信息。根据具体应用场景，包括起始时间、终止时间、历时等，选择带圆点的螺旋线效果如图 9所示。
|
图 9 高亮单条路径详情图 Figure 9 Details of highlighted path |
用户可以通过zoom in、zoom out操作局部放大查看细节，查看整体分布的情况。
3 实验与结果 3.1 数据说明将基于螺旋图的阶段性时间序列可视化模型应用于铁路数据，旨在为用户选择需要转车的路线提供决策支持。
实验数据来自中国铁路售票网www.12306.cn，定义事件为从成都经西安到达郑州的行程。则状态集S为{成都，西安，郑州}，且l1k(k=1, 2, …, 11)，l2k(k=1, 2, …, 68)，即成都到西安有11班列车可达，西安到郑州有68班列车可达。列车数据含有出发时间、到站时间、历时等基本信息。根据列车数据的时间特性，状态的周期设为24 h。由于在列车数据中，列车的发车时间在24 h中并不是均匀分布的，因此需要对周期T分段。周期T的分段可采用如图 10(a)中所示分为“上午”“下午”“晚上”三个时间段的设计，也可采用如图 10(b)中所示分为每段时长为3 h的8段的设计，本实验中选择图 10(b)所示的分段方法。
|
图 10 列车数据状态设计 Figure 10 Status design of train data |
路径lik表示从车站si到车站si+1的列车k，如图 11所示路径表示从成都到西安的列车T8，螺旋线在成都站圆环的位置表示列车在成都站的出发时间，螺旋线在西安站圆环的位置表示列车在西安站的到站时间。这种可视化形式让用户能够方便地看出列车的出发与到达时刻、列车行车时间。根据图 11，用户只须观察在西安站点按顺时针方向向后的列车，能够快速直观地得到列车T8到达西安之后从西安发往郑州的列车，并在其中根据个人需求比如中转间隔时间、列车类型、票价等选择适合自己的班次。
|
图 11 T8高亮显示详情 Figure 11 Details of highlighted path T8 |
特别地，当列车的运行时间超过24 h才到达下一车站，螺旋线旋转的弧度θ＞2π，用户通过螺旋线环绕的圈数可以直观地得到列车运行的天数，结合螺旋线的起始点和终点，列车的运行时间信息得到了全面的展示。在有限空间内，这种可视化方式能够高效地展示运行任意时长的列车。本文采用从成都经西安到郑州的数据的整体效果如图 12所示。
|
图 12 由成都经西安到达郑州的列车数据可视化 Figure 12 Visualization of trains from Chengdu, pass Xi'an, to Beijing |
根据我国列车发车的时间段和人们的出行习惯，周期分为如图 10所示的每段时长为3小时的8段，用户可以将鼠标移至站点圆环感兴趣的时间段上，所选时间段内从该站点出发的所有列车将会高亮显示，以便于用户进行观察和选择，效果如图 13所示，带有圆点的20~23的圆弧为选择的时间段，含有椭圆点的螺旋线为此时间段内出发的列车。
|
图 13 高亮选择20:00—23:00时间段成都出发列车示例 Figure 13 Example of highlighting trains which start from Chengdu within 20:00—23:00 |
当用户将鼠标移至感兴趣的路径lik上，路径lik将高亮显示，同时其他路径透明度降低，便于用户查看选择的路线，lik的右侧出现弹框展示路线信息，包括：车次编号、起始时间、到达时间和运行时长，如图 11所示。
4 结语本文旨在研究阶段性时间序列数据的可视化，在生活中这种数据非常普遍，但是目前还没有一个有效的方法对其可视化。本文提出了一种基于螺旋图的阶段性时间序列数据可视化模型，经过对状态集S的可视化设计，能够有效展示阶段性时间序列状态间转换；对路径的螺旋线设计实现了在有限的空间内，不增加时间轴长度的情况下，任意时长路径的展示；对路径透明度的设计改善了路径交叉、重叠造成的杂乱感，避免了读图时数据信息丢失；交互设计使用户方便地对感兴趣的路径进行详细观察，排除其他路径对其的干扰。在案例分析中采用了中国铁路数据，以火车站点作为状态集，两站之间可达的列车作为路径集L。经验证，本文提出的方案能够对用户进行乘车班次的选择提供有效的决策支持。
阶段i中包含大量的可达路径lik时，螺旋线的数量将会非常大，那么线段之间的大量的交叉与覆盖将会造成强烈的杂乱感，同时也不利于用户观察线路的详细信息。此时对路径进行透明度的调节已经无法满足要求。因此下阶段工作考虑如何使用边捆绑技术对具有相似走向的路径进行捆绑，使界面更整洁清晰。
| [1] | LEI H, XIA J, GUO F, et al. Visual exploration of latent ranking evolutions in time series[J]. Journal of Visualization, 2016, 19(4): 783-795. DOI:10.1007/s12650-016-0349-7 |
| [2] | 姜婷婷, 肖卫东, 张翀, 等. 基于桑基图的时间序列文本可视化方法[J]. 计算机应用研究, 2016, 33(9): 2683-2687. (JIANG T T, XIAO W D, ZHANG C, et al. Text visualization method for time series based on Sankey diagram[J]. Application Research of Computers, 2016, 33(9): 2683-2687.) |
| [3] | BOUALI F, DEVAUX S, VENTURINI G. Visual mining of time series using a tubular visualization[J]. The Visual Computer, 2016, 32(1): 15-30. DOI:10.1007/s00371-014-1052-0 |
| [4] | WEBER M, ALEXA M, MVLLER W. Visualizing time-series on spirals[C]//Proceedings of the 2001 IEEE Symposium on Information Visualization. Washington, DC:IEEE Computer Society, 2001:7-14. |
| [5] | CARLIS J V, KONSTAN J A. Interactive visualization of serial periodic data[C]//Proceedings of the 11th Annual ACM Symposium on User Interface Software and Technology. New York:ACM, 1998:29-38. |
| [6] | CHENG S, JIANG Z, QI Q, et al. The polar parallel coordinates method for time-series data visualization[C]//Proceedings of 20124th International Conference on Computational and Information Sciences. Washington, DC:IEEE Computer Society, 2012:179-182. |
| [7] | HEWAGAMAGE K P, HIRAKAWA M, ICHIKAWA T. Interactive visualization of spatiotemporal patterns using spirals on a geographical map[C]//Proceedings of the 1999 IEEE Symposium on Visual languages. Washington, DC:IEEE Computer Society, 1999:296-303. |
| [8] | DRAGICEVIC P, HUOT S. SpiraClock:a continuous and non-intrusive display for upcoming events[C]//Proceedings of the CHI'02 Extended Abstracts on Human Factors in Computing Systems. New York:ACM, 2002:604-605. |
| [9] | TOMINSKI C, SCHUMANN H. Enhanced interactive spiral display[EB/OL].[2016-11-25]. http://www.informatik.uni-rostock.de/~schumann/papers/2008%2B/tominski_spiral_display.pdf. |
| [10] | BUELENS B. Visual circular analysis of 266 years of sunspot counts[J]. Big Data, 2016, 4(2): 89-96. DOI:10.1089/big.2015.0055 |
| [11] | WALKER J, BORGO R, JONES M W. TimeNotes:a study on effective chart visualization and interaction techniques for time-series data[J]. IEEE Transactions on Visualization and Computer Graphics, 2016, 22(1): 549-558. DOI:10.1109/TVCG.2015.2467751 |