基于螺旋圖的時間序列數據可視化

楊歡歡，李天瑞，陳馨菂

(西南交通大學 信息科學與技術學院，成都 611756)(*通信作者電子郵箱trli@swjtu.edu.cn)

基于螺旋圖的時間序列數據可視化

楊歡歡，李天瑞*，陳馨菂

(西南交通大學 信息科學與技術學院，成都 611756)(*通信作者電子郵箱trli@swjtu.edu.cn)

階段性時間序列數據是一種生活中常見數據形式，它描述一個包含多個狀態轉換的事件，每個狀態都具有時間屬性，且狀態之間的轉換存在多條路徑。針對現有的可視化方法不能有效展示各個狀態之間變化以及狀態間路徑的時間屬性信息的問題，提出一個全新的基于螺旋圖的可視化模型。該模型使用一個圓環表示一個狀態，一個事件的多個狀態采用一組同心圓表示，狀態間可達路徑采用螺旋線表示，螺旋線的起始位置由其起始時間與起始狀態圓環決定，終止位置由其結束時間與結束狀態圓環決定。針對路徑過多導致路徑覆蓋較為嚴重的問題，該模型采用基于長尾函數的透明算法，根據一條路徑與其他路徑的交叉數，為每條路徑分配透明度。該模型還提供了路徑的篩選、高亮、查看詳細信息、縮放等功能，實現了靈活的交互操作。通過對中國鐵路列車站點數據進行實驗，實驗結果表明該模型能夠在有限的空間中有效地展示站點間運行任意時長的列車，并且在列車較多的情況下降低了螺旋線交叉重疊帶來的雜亂度，同時有效地保留了列車的運行信息，能夠為用戶路線的選擇提供決策支持，說明了該模型對階段性時間序列數據可視化的有效性。

可視化；螺旋圖；時間序列；交互設計

0 引言

人類的日常行為中，時間是無所不在的標尺。在當今數據劇增的時代，人們活動產生了大量的數據，其中就包含涉及狀態變化的時間序列數據。人們往往希望從時間序列數據中得到數據隨著時間變化的模式，但是通過肉眼觀察大量數據時很難從中快速得到有效信息。

可視化將數據抽象為圖表的形式，幫助人們理解晦澀難懂的數據，并通過交互發現隱藏在數據中的知識。比較常見的可視化形式包括折線圖、圓餅圖、散點圖以及最近出現的交互性比較強的桑基圖、樹圖等。不同的可視化展現形式適用于不同特性的數據。可視化技術在展示時間序列數據方面已經取得了卓越的成果，例如曲線圖[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所示。

2.1 狀態設計

本節描述狀態圓環的可視化設計方案。設計步驟為：

第1步 單個狀態可視化設計(2.1.1節)；

第2步 圓環時間軸可視化設計(2.1.2節)；

第3步 狀態集可視化設計(2.1.3節)。

本節符號說明如表1中狀態設計模塊所示。

表1 狀態設計符號說明

2.1.1 單個狀態可視化設計

事件的每一個狀態由一個圓環表示，圓環的一周表示一個時間周期，根據實際情況，周期的粒度可以是任何長度的時間，如一小時、一天和一個月等。

圖1 狀態si設計示例

2.1.2 圓環時間軸可視化設計

(1)

圖2 狀態圓環周期可視化設計

設圓心o的坐標為(xo,yo)，狀態si的外半徑為ri，則(xθ,yθ)由極坐標方程表示如式(2)所示:

(2)

由此得時刻t對應位置(x,y)的關系，如式(3)所示:

(3)

2.1.3 狀態集可視化設計

狀態集S中的每個狀態si按照時間先后順序排列，狀態圓環的半徑集R中的半徑ri對應狀態si，ri在集合中按大小升序排列。所有狀態在展示時使用同一個圓心，每個狀態si對應顏色集Color中的顏色colori。狀態集S的可視化設計如圖3所示。

圖3 狀態集S可視化為一組同心圓

2.2 路徑設計

本節主要描述路徑的可視化設計，步驟如下：

第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)所示:

Sradianik=2π*(5/4-startTimeik/T)

(4)

在終止狀態si+1上的位置用弧度表示如式(5)所示。

Tradianik=2π*(5/4-arriveTimeik/T)

(5)

由式(3)，螺旋線段lik的起始位置(Sxik,Syik)如式(6)所示:

(6)

螺旋線段lik的終止位置(Txik,Tyik)如式(7)所示:

(7)

該條螺旋線旋轉的弧度大小如式(8)所示：

Δradianik=(tik/T)*2π

(8)

螺旋線具有隨著弧度的增加，半徑也隨之增加的特點，而且一條螺旋線段的繪制，是采用多段子線條分段繪制，子線條的粒度決定了螺旋線的光滑度。本文中每段子線條的角度為1°，那么螺旋線lik的segmentik值如式(9)所示:

segmentik=(tik/T)*360

(9)

螺旋線lik的子線條集Segik中每個元素segikj(j=1,2,…,segmentik)都是以o為圓心的一段橢圓弧。根據螺旋線lik的繪圖過程中半徑逐漸增加的特點，可知，橢圓弧的半短軸與半長軸集合SegRik是一個等差數列，其首元素segRik1的值是R中的元素ri，尾元素為(ri+1-arcWidth)。Δri如式(10)所示:

Δri=ri+1-arcWidth-ri

(10)

等差數列SegRik的公差如式(11)所示:

Δrik=Δri/segmentik

(11)

根據式(8)，螺旋線lik所經弧度為Δradianik，則每個線段segikj的弧度Δaglikj如式(12)所示:

Δaglik=Δradianik/segmentik

(12)

根據式(11)，橢圓線段segikj的半短軸aikj與半長軸bikj如式(13)所示:

(13)

由式(12)和(13)，橢圓線段segikj的終點位置(Txikj,Tyikj)即segik(j+1)的起點位置如式(14)所示:

(14)

路徑螺旋線設計中各個參數含義如圖4所示。

圖4 路徑螺旋線參數示意圖

特別地，當Δradianik>2π，表示路徑lik歷時tik超過T，那么螺旋線繞圓心超過一周。

定理1 無論螺旋線路徑經歷時間t幾倍于T，都可以在有限空間的圓環內完成螺旋線的繪制。

根據定理1，在T

圖5 時間周期超過T的螺旋線

2.2.2 路徑顏色設計

為了得到較為美觀的可視化展示效果，根據路徑lik的類型typeik，設置其顏色colorik如式(15)所示。

colorik=(colori+1-colori)*p_typeik+colori

(15)

其中，p_typeik表示typeik映射到區間[0,1]的數值。效果如圖6所示，根據路徑類型的不同，設置為不同顏色，如含有圓點和含有橢圓點的螺旋線的不同。

圖6 路徑顏色過渡

2.2.3 路徑透明度設計

當對大規模數據進行可視化時，元素之間的交叉和遮蓋是一個不容忽視的問題。根據概要+細節的概念，本節根據路徑的交叉點個數設置路徑的透明度，其中涉及到的符號說明如表1中透明度設計模塊所示。

階段i存在pi條可達路徑，每條路徑lik的長度不等，當pi較大時，路徑之間必然會產生大量的遮蓋以及大量的交叉點。本文通過識別出與其他路徑具有大量交叉點的路徑lik，并對其進行提高透明度的操作來優化可視化顯示的效果。由于lik表示從狀態si到狀態si+1的變化過程，判斷lik與lip是否具有交叉點的算法如式(16)所示:

(16)

其中：flag=1表示lik與lip有交叉點，flag=0表示lik與lip沒有交叉點。

根據式(16)得到lik的crossNumik。lik的透明度transpik采用關于crossNumik的長尾公式(17)求解:

transpik=k/crossNumik+c

(17)

設階段i最大透明度為transpMaxi,最小透明度為transpMini，階段i路徑的交叉點個數最大為crossNumMaxi，最小為crossNumMini，則階段i長尾函數的系數k，c如式(18)所示:

(18)

該透明度算法具有使低交叉數的路徑透明度低、使高交叉數路徑透明度高的特點，且當交叉數較高時透明度能夠平緩升高并稍低于最小值transpMaxi，能夠給用戶提供美觀、簡潔的效果并且盡可能地保留數據信息。效果如圖7所示，可以看出含有圓點的螺旋線與含有橢圓點的螺旋線的透明度明顯不同。

圖7 路徑透明度設計

2.3 交互設計

2.3.1 高亮選擇時間段

一個圓環表示狀態si，圓環的一周表示狀態的時間周期T,為了便于用戶觀測數據，T可根據實際情況均勻地分為m段。在圓環上表現為m段圓弧，用戶可以通過將鼠標移至圓弧上篩選出起始時間處于這段圓弧上的路徑，此時未被選中的路徑透明度升高，如圖8(b)中所示，選擇17～20時間段的圓弧，即帶圓點的圓弧，而在此時間段內起始的螺旋線，即帶橢圓點的螺旋線，高亮顯示。

圖8 路線篩選效果

2.3.2 高亮選擇路徑

用戶移動鼠標至路徑lik，lik高亮顯示，且出現彈框顯示這條路徑的詳細信息。根據具體應用場景，包括起始時間、終止時間、歷時等，選擇帶圓點的螺旋線效果如圖9所示。

圖9 高亮單條路徑詳情圖

2.3.3 Zoom操作

用戶可以通過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 列車數據狀態設計

3.2 路徑展示

路徑lik表示從車站si到車站si+1的列車k，如圖11所示路徑表示從成都到西安的列車T8，螺旋線在成都站圓環的位置表示列車在成都站的出發時間，螺旋線在西安站圓環的位置表示列車在西安站的到站時間。這種可視化形式讓用戶能夠方便地看出列車的出發與到達時刻、列車行車時間。根據圖11，用戶只須觀察在西安站點按順時針方向向后的列車，能夠快速直觀地得到列車T8到達西安之后從西安發往鄭州的列車，并在其中根據個人需求比如中轉間隔時間、列車類型、票價等選擇適合自己的班次。

圖11 T8高亮顯示詳情

特別地，當列車的運行時間超過24 h才到達下一車站，螺旋線旋轉的弧度θ>2π，用戶通過螺旋線環繞的圈數可以直觀地得到列車運行的天數，結合螺旋線的起始點和終點，列車的運行時間信息得到了全面的展示。在有限空間內，這種可視化方式能夠高效地展示運行任意時長的列車。本文采用從成都經西安到鄭州的數據的整體效果如圖12所示。

圖12 由成都經西安到達鄭州的列車數據可視化

3.3 交互展示

3.3.1 高亮選擇時間段

根據我國列車發車的時間段和人們的出行習慣，周期分為如圖10所示的每段時長為3小時的8段，用戶可以將鼠標移至站點圓環感興趣的時間段上，所選時間段內從該站點出發的所有列車將會高亮顯示，以便于用戶進行觀察和選擇，效果如圖13所示，帶有圓點的20～23的圓弧為選擇的時間段，含有橢圓點的螺旋線為此時間段內出發的列車。

圖13 高亮選擇20:00—23:00時間段成都出發列車示例

3.3.2 高亮選擇路徑

當用戶將鼠標移至感興趣的路徑lik上，路徑lik將高亮顯示，同時其他路徑透明度降低，便于用戶查看選擇的路線，lik的右側出現彈框展示路線信息，包括：車次編號、起始時間、到達時間和運行時長，如圖11所示。

4 結語

本文旨在研究階段性時間序列數據的可視化，在生活中這種數據非常普遍，但是目前還沒有一個有效的方法對其可視化。本文提出了一種基于螺旋圖的階段性時間序列數據可視化模型，經過對狀態集S的可視化設計，能夠有效展示階段性時間序列狀態間轉換；對路徑的螺旋線設計實現了在有限的空間內，不增加時間軸長度的情況下，任意時長路徑的展示；對路徑透明度的設計改善了路徑交叉、重疊造成的雜亂感，避免了讀圖時數據信息丟失；交互設計使用戶方便地對感興趣的路徑進行詳細觀察，排除其他路徑對其的干擾。在案例分析中采用了中國鐵路數據，以火車站點作為狀態集，兩站之間可達的列車作為路徑集L。經驗證，本文提出的方案能夠對用戶進行乘車班次的選擇提供有效的決策支持。

階段i中包含大量的可達路徑lik時，螺旋線的數量將會非常大，那么線段之間的大量的交叉與覆蓋將會造成強烈的雜亂感，同時也不利于用戶觀察線路的詳細信息。此時對路徑進行透明度的調節已經無法滿足要求。因此下階段工作考慮如何使用邊捆綁技術對具有相似走向的路徑進行捆綁，使界面更整潔清晰。

References)

[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.

[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.

[4] WEBER M, ALEXA M, MüLLER 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 2012 4th 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.

[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.

Visualizationoftimeseriesdatabasedonspiralgraph

YANG Huanhuan, LI Tianrui*, CHEN Xindi

(SchoolofInformationScienceandTechnology,SouthwestJiaotongUniversity,ChengduSichuan611756,China)

Phased time series data is common in daily life. It describes an event that contains a number of state transitions. Each state has a time attribute, and there are multiple paths between state transitions. Aiming at the problem that the existing visualization techniques are not sufficient in visualizing the transition of each phase or the time variation of paths between states, a novel visualization model based on spiral graph was proposed. In the proposed model, each state was represented by a circle and the states of an event were represented by a set of concentric circles, and the reachable paths between neighboring states were represented by spirals. The start point of each spiral depended on its start time and the start states, and the end point of each spiral depended on its end time and the end states. To solve the overlapping problem caused by large amount of paths, the transparency adjustment algorithm based on long-tailed function was applied on the paths. The transparency of each path was assigned according to the number of intersections of this path and other paths. Flexible interactive facilities such as path filtering, highlighting, bomb box and zooming were provided to support efficient data exploration. The proposed model was implemented on China railway data, the experimental result shows that the model can effectively display trains of any running duration in limited space and is able to reduce the chaos caused by paths overlapping when confronted with large amount of trains as well as keep the information of trains and provide decision support for the user route choice, which validates the effectiveness of the proposed model in visualizing phased time series data.

visualization; spiral graph; time series; interactive design

2017- 03- 24;

2017- 04- 19。

國家自然科學基金資助項目(61573292)。

楊歡歡(1991—)，女，河南商丘人，碩士研究生，CCF會員，主要研究方向：數據可視化； 李天瑞(1969—)，男，福建莆田人，教授，博士，主要研究方向：粒計算與粗糙集、數據挖掘與知識發現、云計算與大數據； 陳馨菂(1992—)，女，浙江溫州人，碩士研究生，主要研究方向：數據可視化。

時間 2017- 08- 09 10:49:55。 網絡出版地址 http://kns.cnki.net/kcms/detail/51.1307.TP.20170809.1049.004.html。

1001- 9081(2017)09- 2443- 06

10.11772/j.issn.1001- 9081.2017.09.2443

TP311.11

A

This work is supported by National Natural Science Foundation of China (61573292).

YANGHuanhuan, born in 1991, M. S. candidate. Her research interests include data visualization.

LITianrui, born in 1969, Ph. D., professor. His research interests include particle calculation and rough set, data mining and knowledge discovery, cloud computing and big data.

CHENXindi, born in 1992, M. S. candidate. Her research interests include data visualization.