DEIM Forum 2013 E3-5

タグ付き時系列データの可視化と対話的な詳細度制御の一手法
八木佐也香†

内田悠美子†

伊藤 貴之†† お茶の水女子大学大学院人間文化創成科学研究科 〒 112-8610 東京都文京区大塚 2-1-1
E-mail: †{sayaka,yumi-ko,itot}@itolab.is.ocha.ac.jp
あらまし

時系列データの可視化において，折れ線の集合でデータを表示する手法は広く普及しており，データ解析等の目的にも用いられている．しかし，データが大規模になると線分同士の交差が増え，数値の時系列変化を適切に読み取ることが困難になる．また，その多くはグラフの値や形状のみをもとに処理を行っており，天気などのメタ情報と数値の関連は考慮されていない．そこで本論文では，クラスタリングを利用した詳細度制御を行うことで，グラフの読みやすさを向上し，かつ数値とメタ情報の関係性も逃さない表示手法を提案する．これにより，例えば運動・
食事と血圧の変化の関係等，メタ情報と数値・時系列との相関性を発見・分析できると考えられる．
キーワード

情報可視化，タグ付き時系列データ，詳細度制御

A Polyline-Based Visualization Technique for Tagged Time-Varying Data
Sayaka YAGI† , Yumiko UCHIDA† , and Takayuki ITOH†† Graduate School of Humanitics and Sciences, Ochanomizu University
Otsuka 2-1-1, Bunkyo-ku, Tokyo, 112-8610 Japan
E-mail: †{sayaka,yumi-ko,itot}@itolab.is.ocha.ac.jp
Abstract We have various interesting time-varying data in our daily lives, such as weather data (e.g., temperature and air pressure) and stock prices. Such time-varying data is often associated with other information: forexample, temperatures can be associated with weather, and stock prices can be associated with social or economic
incidents. Meanwhile, we often draw large-scale time-varying data by multiple polylines in one space to compare
the time variation of multiple values. We think it should be interesting if such time-varying data are eﬀectively
visualized with their associated information. This paper presents a new time-varying data visualization techniquewhich supposes the associated information is attached as tags of the values of each time step. The technique enables
the level-of-detail by means of clustering similarly-shaped and -tagged polylines. It also provides a user interface sothat users can intuitively discover interesting local features from large number of polylines.
Key words Information visualization, Tagged timevarying data, Level-of-detail control

1. Introduction

prices, foreign currency, sports performance, and weather
measurements such as temperatures.

We also commonly“Big data” is a common term of the information technol-draw multiple time-varying values in a single polyline chart

ogy industry in recent years. Various computer systems store

space so that users can compare the time-varying values.

huge information from various datasets including computer

For example, when we want to visually compare the temper-

system logs, sensor measurements, and transactions. These

atures at multiple locations, we would draw all of them in adatasets easily get huge amount because they are stored

single polyline chart space.

time-by-time. Information visualization is a useful and eﬀec-

On the other hand, we often deal with hundreds or eventive approach for understanding, analysis, and monitoring of

thousands of time-varying values in the above mentioned var-such time-varying datasets.

ious ﬁelds. We may want to visually compare the time vari-

Polyline chart is one of the most popular representation foration of stock prices of many companies, or temperatures oftime-varying datasets. Newspapers and Web sites show vari-

many locations. It result in severe cluttering, and this may

ous polyline charts for time-varying datasets including stockcause diﬃculty in reading data values and following datatrends, if we draw hundreds or thousands of polylines in a

Wattenberg et al. presented a sketch-based query interface

single space. Thus, improved techniques for polyline-based

to search for speciﬁc shapes of polylines [1]. Hochheiser et al.

visualization are required.

pre-sented Timeboxes and TimeSearcher [2], a gradient- andMeanwhile, such time-varying data is often associated withrange-based query interface for polyline-based time-varying

other information: for example, temperatures can be as-data visualization. This technique constrains the number ofsociated with weather, and stock prices can be associatedpolylines to display by selecting range of rectangles. It iswith social or economic incidents. Such information may be

useful to reduce visual clutter and to observe local features

tightly correlated with the time-varying values. For example,of polylines. Though, it is hard to observe overall features ofminimum temperature will be much lower in the morning ofpolylines from the constrained polylines, and not always pos-sunny days in winter due to radiative cooling. On the othersible to select interesting poylines. Our technique solve these

hand, diﬀerence between minimum and maximum tempera-

problems by shape- and tag-based clustering, and interactive

ture will be smaller in the cloudy or rainy days. This kindselection of polylines.

of correlation between time-varying values and associated in-Some works focused on similarity-based pattern and out-

formation can be useful for various purposes such as retrievallier discovery. Buono et al. presented a technique to interac-of frequent and outlier patterns. However, it is not always

tively search for similar pattern [3] as an extension of Time-easy to determine the correlation between them. We believe

Searcher, and a similarity-based forecasting technique [4] forit should be useful if time-varying data visualization tech-

the forecasts of the future patterns. Lin et al. presented aniques simultaneously display such associated information totech-nique to discover non-trivial patterns [5], by clustering

assist the understanding of the correlation.

a set of time-varying values and searching for outliers. Wang

This paper presents a new time-varying data visualization

et al. presented a technique for important polyline selec-

technique which supposes tags assigned to the values of eachtion [6], by conducting a block-wise analysis of time-varying

time step. We suppose that tags consist of a set of predeﬁned

volume data in the joint feature-temporal space. Recently

terms: for example, sunny, cloudy, and rainy for weather

we presented two time-varying data visualization techniques,data, or exercising, eating, or sleeping for health care data.

featuring sketch query on the clustered view [7], and pattern

As a preprocessing, the technique clusters polylines based on

display on the heatmap [8].

their shapes and tags, and then selects representative polylines from the clusters. It realizes smooth level-of-detail control by interactively controlling the number of polylines to be
displayed. Also, the technique features click and sketch interfaces so that users can interactively select particular polylines
which are tagged with the user-interested terms.
This paper presents the eﬀectiveness of the presented technique with Japanese weather data recorded by AMeDAS(Automated Meteorological Data Acquisition System).

Though, there has been comparatively little research which
visualize time and associated information simultaneously.

3. Level-of-detail control for time varying
data visualization
This section brieﬂy introduces a level-of-detail control anda sketch interface [7] for time-varying data visualization previously we presented.
The technique supposes the following time series data, con-

The dataset consists of time-varying temperature values

sisting of a set of values P = (p1 , p2 , ..., pn ) represented

with weather tags including “Clear”, “Sunny”, “Cloudy”,

as n polylines.

“Rainy”, and “Snowy” at 376 observation points. We visu-

pi = (pi1 , pi2 , ..., pim ); pij denotes the value at the j-th time

ally dis-covered diﬀerent patterns of temperature variationsof the i-th polyline. We draw the set of values as a poly-

from the visualization result.

line chart, while the horizontal axis denotes the 1st to the

2. Related WorkWe describe the values of a polyline asm-th time, and the vertical axis denotes the magnitude of
the values.

Polyline chart is one of the most popular representation for

As a preprocessing, the technique temporarily quantizes

time-varying data in our daily life, and many resent works

polylines, generates clusters of them, and selects represen-

have proposed polyline-based techniques to visualize time-

tative polylines from the clusters. While the quantization

varying data. Polyline-based visualization technique has thestep, the technique generates a grid surrounding all poly-following features:lines, and calculates intersections between the polylines and•Better to read the ﬁnely values than visualization tech-niques which use colors to denote values.
•

Suitable for represent continuous values (e.g. the mea-

surements of science).

grid-lines. It then generates rough polylines by connecting
the intersections, and uses them for the clustering. Numberof clusters can be controlled by the resolution of the gridas well as similarity threshold values, and our implementa-tion prepares several clustering results so that the number ofrepresentative polylines smoothly varies.
The technique then initially displays representative polylines.

Smoothly switches clustering results, it can seam-lessly change the number of representative polylines to be
displayed. The technique also provides a click interface, sothat users can specify interesting representatives by directly
clicking. It also provides a sketch interface, so that users can
specify interesting representatives which have partial shapes
Figure 1 Quantization and clipping of polyline.

similar to the sketched curves.

4. Extension to the tagged time-varying
data visualization
This section proposes an extended visualization technique
for tagged time-varying data. This paper extends the afore-（ 1 ） Divide the clipped polylines according to tags, as

shown in Figure 2(b), using a dendrogram from the polylines
constructed according to similarities of their k-dimensional
vectors (wjti−1 , ..., wjti ).

mentioned time series data as follows: we describe the tags

（ 2 ） Apply a non-hierarchical clustering, e.g. k-means,of the i-th polyline as wi = (wi1 , wi2 , ..., wim ); wij denotes

to the polylines in each cluster, using their n-dimensional

the tag at the j-th time of the i-th polyline, as well as pij

vectors (pjti−1 , ..., pjti ), and generate clusters consisting ofdenotes the value at the j-th time of the i-th polyline.

similarly tagged and shaped fragments of polylines, as shown4. 1 Clustering and Representative Polyline Selection
The extended technique displays adequate number of representative polylines to reduce the cluttering among thepolylines and improve readability. The technique clips thein Figure 2(c).
Here, we predesignate the number of clusters as speciﬁed byusers.
（ 3 ） Select representative polylines, for each cluster, as

shown in Figure 2(d).

polylines interval by interval, and then generates clusters ofclipped polylines for each interval, where clipped polylines
in a cluster is similarly shaped and tagged.
The procedure of quantization and clipping step is as follows.
（ 1 ） Generate a grid covering the drawing area, and thendivides into a × b subspaces as shown in Figure 1(a).
Here this thesis formalizes the grid as follows:••

hi is the i-th horizontal line of the grid (0 <
=i<
= b).
<
vi is the i-th vertical line of the grid (0 <
i
a).
= =

•

ti is the time at vi .

•bi is the value at hi .

（ 2 ） Sample P at t0 to ta , and temporarily quantize thesampled values at b0 to bb . Here, bi is the value at the i-thhorizontal line of the grid.

Figure 2 Clustering of polylines.

（ 3 ） Generate groups of polylines, if the polylines have thesame quantized values both at ti−1 and ti , as shown in Figure

Our current implementation simply extracts a representa-

1(b).

tive polyline, which is the closest to the center of a cluster（ 4 ） Clip polylines of a group by ti−1 and ti , as shown inin a n-dimensional vector space. This strategy is basicallyFigure 1(c), and generates clusters of the clipped polylines.

good because it can select average polylines. Moreover, by

Figure 2 denotes the procedure for clustering of taggedusing the strategy, we can ﬁrstly designate the number ofpolylines, while the colors of polylines denote their domi-

clusters, then designate the number of polylines. It is ad-nant tags. Here, the technique regards the clipped polylines

equate for our purpose to control the number of displayed

as n-dimensional vectors, while they contain n time steps

polylines. Here, if one or more polylines in a cluster have

between ti−1 and ti .

been already selected as the representative polylines of otherclusters, the technique does not select any new representa-

When a user clicks a point on the display, the technique

tive polyline from the current cluster, so that we can reduce

calculates distances between the point and all segments ofthe total number of representative polylines.

the drawn polylines. If at least one of the segments of a

4. 2 Interactive Visualization
4. 2. 1 Display of Representative polylines
The extended technique represents the time-varying dataas colored polylines. It assigns colors to the tags (e.g. red
to sunny, and gray to cloudy, to the tags of weather data),
and draws the polyline in the assigned colors. If the verticesof a segment of a polyline have diﬀerent tags, it interpolates
the colors along the segments. The technique also features
selective polyline display based on the tags. Users can selectparticular tags so that the technique can draw only corresponding parts of the polylines. They can also select particular tags to be ﬁltered from the display of the polylines.
Initially our technique draws only the representative polylines. Here, number of representative polylines depends on
the resolution of the grid and the threshold of the clustering
process. Our current implementation generates several clustering results, with several conﬁgurations of the grid and theclustering process. Smoothly replacing the clustering results,
our technique seamlessly displays several levels of numbersof representatives.
Here, the technique adjusts transparency of representative
polylines in each time steps. One drawn representative polyline has time steps which are selected as representative andare not selected as representatives as shown in Figure 3. Intime steps which are selected as representative, the techniquedraws a polyline as low transparency based on the number ofpolyline is enough close to the clicked point, the techniquehighlights the current polyline. When a user draws a curveon the display, as shown in Figure 4, the technique samples
several points on the curve, and calculates distances between
y-coordinate values of the sampled points and y-coordinate
values of all segments of the representative polylines. Concretely, the technique compares one point on the sketchedcurve to the points of the representative polylines which haveclosest x-coordinate value with it. If at least one of the segments of a polyline is enough close to each of the sampled
points, the technique highlights the current polyline.
Users may want to specify polylines by logical operationof the polylines speciﬁed by multiple click/sketch operations.
To satisfy such a requirement, the technique can implement the logical operation. The technique ﬁgures out logical
AND/OR operation of several times inputs, and highlights
the calculated representatives. The technique can also highlight polylines which have similar shape with sketched segment at a diﬀerent height. It calculates slope between two
points instead of comparing y-coordinate values.
Users can specify particular tags to be extracted by theabove query operations. It can highlight only the parts ofthe polylines corresponding to the speciﬁed tags while theclick or sketch operations. It can also reactivate only theparts of the non-representative polylines corresponding to
the speciﬁed tags.

original polylines in the cluster. Meanwhile, it draws a polyline as quite high transparency in time steps which are notselected as representative. Through this process, the technique can reduce the visual clutters while displaying consecutive polylines. Users can also observe how many original
polylines are represented as the drawn polylines.

Figure 4 Sketch interface.

5. Examples
We developed the presented technique with JDK (Java
Figure 3 Visualization of representative polylines.

4. 2. 2 Interactive Extraction of Polylines
The technique provides click and sketch interfaces, so thatusers can specify interesting representatives by directly clicking or sketching particular shapes.

Development Kit) 1.6, and executed on a personal computer (CPU 2.67GHz Dual Core, RAM 2.0GB) with Windows Vista (32bit). The processing time of the technique isestimated as follows. The time for level-of-detail control isO(n(a + s)); for quantization and clipping is O(na) and forFigure 5 (Upper) Overview without tags. (Center) Overview with tags(before applying level-of-detail control). (Lower) Overview with tags(after applying level-ofdetail control).
Table 1 Average number of sunny day in July (1981-2010 normal value)
Sapporo Sendai Niigata Tokyo Nagoya Osaka Hiroshima Takamatsu Fukuoka Kagoshima Naha
13.0

9.7

14.2

12.1

14.2

16.5

15.9

17.7

15.7

17.9

24.1

clustering is O(ns), for sketch interface is O(rq).

We applied Japanese weather data recorded by AMeDAS

Here, we formalize the each variable as follows:(Automated Meteorological Data Acquisition System) to the•n is the total number of polylines

presented technique. We extracted time-varying tempera-•

a is the number of sampled time steps

ture data observed at 376 points around Japan in every 3•s is the total number of time steps

hours. Again, each polyline denotes each observation point,•r is the number of representative polylines

the horizontal axis denotes time steps and the vertical axis•

q is the number of sketched time steps

denotes temperature values.

In our measurement, the average time for level-of-detail con-We then assigned weather tags including “Clear”,

trol was 177 milliseconds, and the average of sketch process“Sunny”, “Cloudy”, “Rainy”, and “Snowy” to temperature

was 1 milliseconds, which n = 376, a = 10, s = 240, r = 249,

value of each time of each point. Here, we assign one tag toand q = 8. This result denotes that the technique is enougha particular time of a particular polyline, and do not cover

fast for the interactive visualization.

in the case where multiple tags are simultaneously assigned.

Figure 6 Zoom up view: (a) without level-of-detail control. (b) with level-of-detail control(tag-based clustering). (c) with level-of-detail control (shape-based clustering).

Figure 7 Overview applying level-of-detail control with tag-based clustering.

Our implementation draws the segments of “Clear” polylines in red, “Sunny” in yellow, “Cloudy” in green, “Rainy”

data, since it is diﬃcult to obtain such knowledge from Figure 5(Upper).

in blue, and “Snowy” in cyan, interpolating the colors if tags

To observe the detailed variation, we applied level-of-detailof two ends of a segment is diﬀerent. Exceptionally it may

control to the original polylines including all observation

draw the segments in gray if we cannot obtain the weather

points. Figure 5(Lower) shows the results. In this ﬁgure, se-data. While using click or sketch interfaces, our implemen-vere overlaps of polylines are reduced, especially non-tagged

tation draws selected polylines brightly, and others in gray.

ones colored in gray. As mentioned above, we can observe

5. 1 Example (1)We visualized a dataset during 1 to 31, July, 2009. Figure
5 shows an overview of the temperature data. Figure 5(Upper) shows an overview without tags, and Figure 5(Center)shows an overview with tags. Here, the both results show thelong rain have continued in various regions. We can also observe only a few red or yellow (“Clear” or “Sunny”) days,
while there are about 10 to 20 sunny days in an average year
as shown in Table 1.
5. 2 Example (2)results including all observation points before applying level-

We visualized a dataset during 1 to 31, December, 2009.

of-detail control. While Figure 5(Upper) displays just ma-

Figure 6 shows a zoom up view of temperature variation

jor and outlier variations of temperature, Figure 5(Center)during ﬁve days. Figure 6(a) shows the original view of thedemonstrates much more information. Colors in the dense

tagged temperature data before applying level-of-detail con-parts denote major weather of the days. Blue (“Rainy”)

trol, and Figure 6(b) shows after applying level-of-detail con-is observed in several consecutive days and it appears sev-

trol with tag-based clustering. Figure 6(a) has many overlaps

eral times during the period. This result well demonstrates

of polylines, while Figure 6(b) represents the features of thethe eﬀectiveness of the visualization of tagged time-varying

data more clearly. In Figure 6(b), we can ﬁnd that extremelylower temperature can be often observed from “Clear” or

We would like to discuss what kinds of visual metaphor can“Sunny” points, and it shows typical feature of winter tem-be more eﬀective for the representation of more kinds of tags.

perature due to radiative cooling. It is diﬃcult to obtain[Multiple tags at a point:] It is also diﬃcult for oursuch knowledge from the visualization results with shape-

current implementation to represent if multiple tags are si-

based clustering without considering tags, as shown in Fig-

multaneously assigned to a particular time of a particularure 6(c). Here, representative polylines are selected based

polyline. Again, we would like to discuss what kinds of vi-

on only their shape. In Figure 6(c), polylines which havesual metaphor can be more eﬀective for the representation

extremely lower temperature is drawn as gray, and missedof multiple tags.

important weather features as mentioned above. The result[Observation of tag-change:] It is interesting for several

denotes that we can observe overall features without miss-kinds of data to observe how time series values vary when theing detailed features while reducing cluttering among poly-

assigned tags change. We would like to add features to thelines by the eﬀort of level-of-detail control considering tags

technique so that we can focus on time series value variation

on clustering step.

with particular patterns of tag changes.

Figure 7 shows the overview applying level-of-detail control[More applications and tests:] We would like to apply

with tag-based clustering. In the middle of month indicatedmore various data to the technique, including medical mea-

by a dotted white rectangle, we can observe that temper-

surement datasets, system measurement datasets, and stock

atures drawn as red or yellow polylines have been drasti-

price datasets. We would also like to have experiments forcally decreased. While temperatures drawn as blue or cyan

subjective and objective evaluations of the technique.

pollines have been slightly varied.
To observe long-term variation of 2 patterns above, weclicked the polylines. Figure 8(Upper) shows the result which

Reference

we clicked low-range points while selecting two tags “Clear”[1] M. Wattenberg, D. Jones, ”Sketching a Graph to Querya Time-Series Database”, SIGCHI Conference on Human Factors in Computing Systems Extended Abstract(CHI2001), 381-382, 2001.
[2] H. Hochheiser, B. Shneiderman, ”Dynamic query tools fortime series data sets: Timebox widgets for interactive exploration”, Information Visualization, 3(1):1-18, 2004.
[3] P. Buono, A. Aris, C. Plaisant, A. Khella, B. Shneiderman,”Interactive Pattern Search in Time Series”, Conference on
Visualization and Data Analysis ’05, 175-186, 2005.
[4] P. Buono, C. Plaisant, A. Simeone, A. Aris, B. Shneiderman, G. Shmueli, W. Jank, ”Similarity-based forecastingwith simultaneous previews: A river plot interface for timeseries forecasting”, 11th International Conference on Information Visualisation, 191-196, 2007.
[5] J. Lin, E. Keogh, S. Lonardi, ”Visualizing and Discovering Non-trivial Patterns in Large Time Series Databases”,
Information Visualization, 4(2), 61-82, 2005.
[6] C. Wang, H. Yu, K.-L. Ma, ”Importance-driven timevarying data visuaization”, IEEE Transactions on Visualization and Computer Graphics, 14(6):1547-1554, 2008.
[7] Y. Uchida, T. Itoh, ”A visualization and level-of-detail control technique for large scale time series data”, 13th International Conference on Information Visualisation, 80-85,
2009.
[8] M. Imoto, T. Itoh, ”A 3d visualization technique for large
scale time-varying data”, 14th International Conference on
Information Visualisation, 17-22, 2010.

and “Sunny”; consequently polylines tagged as “Clear” or“Sunny” at the clicked points were highlighted. It represents that range of temperature between the daytime andthe night is relatively large. We can also ﬁnd that extremely
lower temperature can be often observed from “Clear” or“Sunny” points. Figure 8(Lower) shows the result which we
clicked high-range points while selecting two tags “Rainy”
and “Snowy”; consequently polylines tagged as “Rainy” or“Snowy” at the clicked points were highlighted. It represents that range of temperature between the daytime andthe night is relatively small, and the average is a bit higher
than temperatures of “Clear” and “Sunny”. We can also
observe sunlight is little through the periods.
These results denote that we can discover interesting local features from large number of polylines, and observe thefeatures by the eﬀort of interactive extraction of polylines.

6. Conclusion
This paper presented a polyline-based visualization technique for tagged time-varying data. The paper ﬁrst describedthe deﬁnition of the tagged time-varying data, and presented
techniques for level-of-detail control and interactive polyline
selection. It also demonstrated eﬀectiveness of the technique
by applying temperature data with weather tags.
Our potential future work includes the followings:[Many kinds of tags:] Since our current implementation
represents tags as colors, it may be diﬃcult to visually distinguish if we have many kinds (e.g. more than 10) of tags.

Figure 8 Interactive selection. (Upper) Polylines tagged as “Clear” or “Sunny” at theclicked points are highlighted. (Lower) Polylines tagged as “Rainy” or “Snowy”
at the clicked points are highlighted.