2012 16th International Conference on Information Visualisation

ChronoView: Visualization Technique for Many Temporal Data
Satoko Shiroi
Department of Computer Science
University of Tsukuba
Ibaraki, Japan
shiroi@iplab.cs.tsukuba.ac.jp

Kazuo Misue
Faculty of Engineering,
Information and Systems
University of Tsukuba
Ibaraki, Japanmisue@cs.tsukuba.ac.jp

We propose a visualization technique to represent a set oftime-stamps as positions on a two-dimensional plane. This
positional representation enables us to visualize many events
simultaneously and makes it easy to ﬁnd their temporalfeatures. Our visualization technique is based on a circle, likean analog clock, so we call it “ChronoView.” Visualization
techniques based on a circle have been used for many years,
and these techniques have recently been applied in various
domains [2].

Abstract—This paper presents a method of visualizing datathat contains temporal information, such as a human’s behavior and the time at which it occurs. A feature of the datais that each event may have one or more time-stamps. By
analyzing this kind of data, we are able to ﬁnd some behavioral
patterns and obtain knowledge applicable to many ﬁelds, suchas marketing research and security. We develop ChronoView,
a visualization technique to support the analysis of data withtemporal information. ChronoView represents an event with aset of time-stamps as a position inside a circle, similar to thedial of an analog clock. By representing each event as a position
on a two-dimensional plane, we can simultaneously visualize
many events and easily compare their occurrence patterns.
We implement a tool based on ChronoView, which is enrichedwith additional functions and overcomes the drawbacks of theoriginal system. A use case involving tweet data from Twitter
illustrates the use and practicality of ChronoView.

II. R ELATED W ORK
A. Visualization of Data with Temporal Information
Aris et al. aimed to treat unevenly spaced time series
data and developed several visualization methods [3], andBuono et al. developed a visualization tool for the interactive
analysis of time series data [4]. These tools enabled us toknow when events occurred and to ﬁnd the co-occurrenceof several events by visualizing individual time-stamps.
Krstajić et al. developed CloudLines to deal with timebased representations of large and dynamic event data sets
in limited space [5]. Their representation adapts to the databy employing a decay function to let items fade away
according to their relevance. However, it is difﬁcult to ﬁnd
the periodicity of single events or compare the periodicities
of a number of events.
Nguyen et al. developed visualization techniques for temporally referenced tags that exploit their text size and brightness [6]. Additionally, another variation uses the backgroundcolor of tags and color-coded cells, as in a calendar. Using
these techniques, we can easily compare occurrences of
events if we focus on a speciﬁc date and time. However, it
is difﬁcult to understand the periodicity of the events and tocompare their occurrences when focusing on the combined
conditions of years, months, days, and time.

Keywords-temporal information; event; time-stamp; periodicity

I. I NTRODUCTION
In this paper, we describe a system for visualizing datathat contains temporal information. The data consists of aset of pairs describing an event and its occurrence time.
For example, we can consider a web access log as datawith temporal information, because the log records which
pages were accessed and at what time. Other examples
include product sales histories, tweet data from Twitter, andincident logs at a call center. By analyzing these data, we canobtain some knowledge about the occurrences of events. For
example, we may notice that some events occur at speciﬁctimes. Such knowledge is useful in various ﬁelds such as
market research, security, and lifelogging.
Generally, an event occurs once or more and then has one
or more time-stamps. Suppose that access to a web page isan event. If a web page is accessed at 9 p.m., 10 p.m., and11 p.m., the event (that is, the access to the web page) has
three time-stamps.
Many visualization techniques for temporal information
have been proposed [1]. Most of them represent each timestamp individually, but do not represent sets of time-stamps.
Therefore, it is not easy to ﬁnd dependency on a speciﬁctime range or the periodicity of the event occurrences.
1550-6037/12 $26.00 © 2012 IEEE
DOI 10.1109/IV.2012.29

Jiro Tanaka
Faculty of Engineering,
Information and Systems
University of Tsukuba
Ibaraki, Japan
jiro@cs.tsukuba.ac.jp

B. Circular and Spiral-Type Visualization
Misue proposed an Anchored Map representing bipartite
graphs [7]. On an Anchored Map, nodes in one of two
sets are placed on the circumference and nodes in theother set are placed at suitable positions to represent theirrelationships to adjacent nodes. Restricting nodes in one set
112

Figure 1.

Figure 2. Example showing the distribution of events using the barycenterof time-stamps.

Overview of ChronoView.

suppose that U is a set of all time-stamps, the positions of
the time-stamps are expressed by the function f0 : U → R2 .

to the circumference makes grasping the relationships among
them easier. ChronoView can be considered as a variationof an Anchored Map. However, while the Anchored Map is
a technique for graph drawing, ChronoView is a techniquefor visualizing data with temporal information.
Carlis et al. developed spiral visualization to represent
both the continuity of time and the periodicity of a week,
a month, or a year [8]. This technique allows us to grasp
the frequency and periodicity of events. Tominski et al.
improved the existing spiral representation using a twotone pseudo-coloring method and interaction [9]. With thistechnique, we can analyze multivariate data with someperiodicity easily. However, it is not easy to compare many
events when the number of spirals increases.
Dragicevic et al. developed SpiraClock, which shows
events using an analogy of an analog clock but with a spiralrepresentation [10]. This technique is useful for events overa few hours, but unreasonable for events in the longer term.

f0 (t) = (r cos θ, r sin θ)
where
θ=

(1)

t − t0
π
− 2π
.
2
c

Suppose that T is a ﬁnite set of time-stamps, that is,
T = {t1 , t2 , · · · , tn } ∈ 2U . We assign the barycenter ofthe positions of ti (i = 1, · · · , n) to the set T . The positions of sets of time-stamps are expressed by the function
f : 2U → R 2 .
f (T ) =1 
f0 (t)
|T |

(2)

t∈T

Thus, if an event e has a ﬁnite set of time-stamps T , e isplaced at f (T ).
In Figure 1, 0:00 a.m. (midnight) is set to t0 and a period
c is 24 h. When c is 1 h, ChronoView represents a diagramof a one-hour period. When c is 168 h (i.e., seven days),
it represents a diagram of a one-week period. In a similarway, ChronoView can represent a one-month or one-year
period. However, we need a slight modiﬁcation to createsuch diagrams, because the length of months and years are
not actually constant.
For example, let us consider the case where c = 24 h.
Figure 3 shows two cases. If an event occurs at 0:00, 8:00,
and 16:00, the event is placed at the center of the circle. If
another event occurs at 18:00 and 22:00, the event is placed

III. C HRONOV IEWChronoView is a technique for visualizing many eventswith one or more time-stamps. This technique represents
each event as a position on a two-dimensional plane. Figure 1 shows an overview of ChronoView.
A. Representation of sets of time-stamps
First, we give a position on the circumference of acircle of radius r to each time-stamp. We give the twelveo’clock position on an analog clock to the time-stamp t0 .
Moving clockwise, we then place all time-stamps on thecircumference according to the time elapsed from t0 . If we

113

Figure 4.

220

Overview of our visual tool to handle ChronoView.

occurrences. Thus, events that occur often are expressedas large, conspicuous circles. The circle color expresses
the category of the events. In Figure 1, events are notcategorized and have all been drawn in the same color. In
Figure 5, events are divided into two categories. Events in
one category have been colored light blue and events in theother category have been colored pink.

2
4

20

6

18
8

16

C. Representation of Additional Information

14

12

10
In Figure 1, events are represented by circles on a twodimensional plane. Additional lines make the visualization
more detailed and/or clearer.
ChronoView has some ambiguity of representation because it may assign the same position to some events withdifferent time-stamps. We have considered a way of avoiding
this ambiguity.
Showing the time at which an event actually occurred, we
draw radial lines from the event. Figure 2 shows an example
where time-stamps of the “go home” (“Kitaku” in Japanese)
event are represented by radial lines. Showing these radiallines, we can understand when the events occurred andappreciate their time-stamp distribution.
Using these additional lines provides more information,
but may cause the visual representation to become complicated. Therefore, these lines should be drawn temporarily
according to user operation, such as a mouse click.

Figure 3.
Example of the representation of a set of time-stamps inChronoView.

at a position close to 20:00 on the chord between 18 and
22.
B. Representation of Attributes of Events
Events have some attributes, such as a text label andcategories. The number of occurrences, i.e., the number oftime-stamps, can also be regarded as an attribute.
Retinal variables [11], such as colors, shapes, and sizes,
can be used independently of position. Therefore, we use
retinal variables to represent attributes. In Figure 1, every
event is represented as a light blue circle with a whitelabel, and the size of the circle expresses the number of114

IV. D EVELOPMENT OF THE T OOL

V. U SE C ASE

We developed a visual tool to enable ChronoView tosupport the analysis of data with temporal information, using
tweet data from Twitter as analysis objects. Figure 4 shows
an overview of the tool.

We analyzed tweet data from Twitter as a use case ofChronoView.
A. Data
We used tweets containing the keyword “now” inJapanese, such as “Cafe, now” and “Shinjuku, now.” “Now”
is an English word, but Japanese tweeters often use it toexpress their current situation. Tweets containing “now” areconsidered as signs of casual, daily behavior. Therefore,
analysis of such data is expected to be useful in the ﬁeldof market research.
We collected tweet data using StreamingAPI from Twitter1 . This data contains the user name, date, day, time, andtweet text. We used MeCab2 for a morphological analysisof tweets containing “now,” and picked out clauses before“now” that expressed human behavior. Table I shows someexamples of tweet data.
We consider two sets of tweets. One set includes 18,584
tweets collected from 20th to 26th June 2011, which contains
6,318 different words. The other set includes 19,805 tweets
collected from 13th to 19th September 2011. This datacontains 9,494 different words. We analyzed and compared
the events in both sets.
Our program of data collection using StreamingAPI displayed unstable behavior. Some parts of the data have notbeen completely retrieved, but we do not believe that thisseriously inﬂuences the illustration of our use case. Of
course, it is desirable that the data is complete to make theanalysis more reliable.

A. ChronoView
Our visual tool places ChronoView in the center of thewindow. The tool provides three types of view: all view,
weekday-and-holiday view, and day view.
All view shows all of the collected data, with each lightblue circle expressing an event. If we click on a circle,
radial lines are drawn from the circle, as shown in Figure 2,
allowing us to understand the actual occurrence time of theevent.
In weekday-and-holiday view (see Figure 5), events are
divided into two categories: events on weekdays and eventson holidays. Each light-blue circle expresses an event on
a weekday and each pink circle expresses an event on aholiday. In this view, we can examine the difference between
occurrences on weekdays and holidays.
In day view (see Figure 6), events have been divided
into seven categories, i.e., one for each day of the week.
Events on different days are assigned a unique color. If weclick on a circle, curved lines are drawn that connect circles
corresponding to the same events. In this view, we can see
how occurrence times for the same events differ across aweek.
B. Detailed View

B. Observations

If we click on an event in ChronoView, detailed information about it is displayed in the sub-window on the righthand side. When our target is tweet data from Twitter, thedetailed information includes handle names, tweet text, tweet
date, and so on.

From the ChronoView of tweet data from 20th June, we
found that the size of the events “wake up” and “lunch”
are almost the same. This means both events have similarfrequencies. However, “wake up” is positioned farther fromthe circumference than “lunch.” We can infer from this thatthe occurrence time of “wake up” has a broad spread. On theother hand, “lunch” was placed near to the circumference,suggesting that this event is concentrated at a speciﬁc time.
“Wake up” was placed near a position from 6:00 to
12:00. This event occurred over a wide range of time.
In contrast, “lunch” was concentrated between 11:00 and
14:00—obviously, “lunch” depends on a speciﬁc time.
According to the radial lines, we found that “wake up”
had also occurred between 18:00 and 21:00 and “lunch”
had also occurred between 16:00 and 19:00. From detailed
information about these events, we were able to ﬁnd somereasons for such outliers. These suggested that waking up
late and eating lunch late were caused by jobs and studying.
We compared the data from 20th June with data from13th September. We found that daily events such as “wakeC. Operation View of the Representation
The sub-window on the left-hand side provides three
radio buttons for switching between the three view types in
ChronoView and sliders for changing some view parameters.
By operating the sliders, users can specify the maximum andminimum frequency of displayed events, and the opacity of
the circles representing events.
If very many events are placed at a similar position, theview becomes so complicated that it is difﬁcult to distinguishall events at the same time. In such cases, ﬁltering the eventsby occurrence frequency is effective for retaining ease ofobservation.
If very many events with similar occurrence frequencies
are placed at a similar position, ﬁltering by frequency does
not work well. In such cases, it is effective to adjust theopacity of the circles representing events. The more circles
are crowded, the lower the opacity to be effective.

1 https://dev.twitter.com/docs/streaming-api
2 http://mecab.sourceforge.net/

115

Figure 5.

Events on weekdays and holidays are distinguished by colors.

Figure 6. Events on different days of the week are distinguished by colors.

Table IE XAMPLES OF DATA INCLUDING TEMPORAL INFORMATION .

Userwhite luc
yamahakusyon
adajmdap

Date
20/06/2011
20/06/2011
20/06/2011

Day
Mon
Mon
Mon

Time
17:30:24
17:33:09
17:35:12

Tweet
Staying in cafe, now.
Got home, now.
Staying in Shinjuku

Event
cafe
get home
Shinjuku

C. Discussion

up,” “lunch,” and “get home” were placed at almost the same
positions in both sets of data. However, the “wake up” event
has a noticeable feature. In the data from 20th June, thisevent occurred later on holidays than on weekdays, but inthe 13th September data, the event occurs later on weekdays
than on holidays. Thus, the rhythm of people’s lives might
have changed.
By comparing the data from 20th June with data from13th September, we found some events occurred frequently
only in a term. These events are found in the data of one
period, while they are not found in the other period.
We found the event “cobb” at the left-center of the viewin the 20th June data, and inferred from its position thatthe event had occurred between 12:00 and 21:00. When weclicked the circle, radial lines were seen to be concentrated
from 12:00 to 15:00 and from 17:00 to 21:00. We may
conclude that this event occurred at lunchtime or dinnertime
for many people.
From the day view, we found that the event had occurredon Thursday, Friday, and Saturday. By studying the detailed
view of the “cobb” event, we came to understand that amajor hamburger shop had used Twitter to promote their
new product.

We could understand some rough features of the eventsusing ChronoView. Examples of these features are not
only how often events occurred, but also whether an event
depends on a speciﬁc time and when an event has occurred.
Even if two or more events have almost the same frequency,
we can ﬁnd some differences between them, like theirdependency on a speciﬁc time and periodicity.
We were able to actually understand the occurrence time,
and the distribution of the time about an event, by adding
radial lines from the circle corresponding to the event. The
radial lines overcome some of ChronoView’s ambiguity.
Exploiting three types of view, as shown in the use case,
we can observe the differences in event occurrence times foreach day of the week and for weekdays and holidays. We
can understand details of the events by seeing the original
tweet text. In this way, we can analyze the different featuresof daily events to give an overview and breakdown of thedetails from various views in the ChronoView interface.
It is possible to understand distinct features of daily eventsin different periods by switching between the three view
types and using the radial line representation. Therefore,116we found that we could show different features of thesame event in ChronoView by comparing multiple data fromdifferent periods.

[3] Aleks Aris, Ben Shneiderman, Catherine Plaisant, Galit
Shmueli, Wolfgang Jank: Representing Unevenly-Spaced Time
Series Data for Visualization and Interactive Exploration,
HumanComputer Interaction INTERACT 2005, pp. 835–846(2005).

VI. C ONCLUSION[4] Paolo Buono, Aleks Aris, Catherine Plaisant, Amir Khella,
Ben Shneiderman: Interactive Pattern Search in Time Series,
Proceedings of Conference on Visualization and Data Analysis(VDA 2005), pp. 175–186 (2005).

In this paper, we proposed ChronoView, a technique tovisualize data containing temporal information. One of themost important features of ChronoView is that it represents
a set of time-stamps as a position on a two-dimensional
plane. This can be used to visualize many events with
one or more time-stamps. Some attributes of the events
can also be represented visually. Using this technique, we
could grasp some features about the periodicity of theevents’ occurrence. Moreover, we were able to observe the
distribution of an event’s time-stamps by adding radial lines
and switching between the three view types.
We performed a use case, which focused on tweet datafrom Twitter, to demonstrate the usefulness of ChronoView.
This showed the usefulness and effectiveness of ChronoView
by analyzing tweet data. ChronoView can be applied not
only to tweet data, but also to other data with temporal information, e.g., access logs of Web pages and the sales historyof products. In future work, we will display the versatilityof ChronoView by performing several case studies.

[5] Miloš Krstajić, Enrico Bertini, Daniel A. Keim: CloudLines:
Compact Display of Event Episodes in Multiple Time-Series,
IEEE Transactions on Visualization and Computer Graphics,
Vol. 17, pp. 2432–2439 (2011).
[6] Dinh Quyen Nguyen, Christian Tominski, Heidrun Schumann,
Tuan Anh Ta: Visualizing Tags with Spatiotemporal References, 15th International Conference Information Visualisation(IV2011, July 12-15, 2011, London, UK), pp. 32–39 (2011).
[7] Kazuo Misue: Overview of Networks Information by Using
Anchored Maps, 11th International Conference on KnowledgeBased and Intelligent Information & Engineering Systems(KES2007), pp. 1269–1276 (2007).
[8] John V. Carlis, Joseph A. Konstan:Interactive Visualization ofSerial Periodic Data, Proceedings of the 11th annual ACM symposium on User interface software and technology (UIST’98),
pp. 29–38 (1998).
[9] Christian Tominski, Heidrun Schumann: Enhanced Interactive
Spiral Display, Proceedings of the Annual SIGRAD Conference
2008, pp. 53-56 (2008).

R EFERENCES[1] Sônia Fernandes Silva, Tiziana Catarci: Visualization of Linear
Time-Oriented Data: A Survey, Proceedings of the First International Conference on Web Information Systems Engineering(WISE’00), Vol. 1, pp. 310–319 (2000).

[10] Pierre Dragicevic, Stephane Huot:SpiraClock:A Continuousand Non-Intrusive Display for Upcoming Events, CHI’02
Extended Abstracts on Human Factors in Computing systems(CHI EA’02), pp. 604–605 (2002).

[2] Geoffrey M. Draper, Yarden Livnat, Richard F. Riesenfeld: A
Survey of Radial Methods for Information Visualization, IEEE
Transactions on Visualization and Computer Graphics, Vol. 15
Issue 5, pp. 759–776 (2009).

[11] J. Bertin: Semiology of Graphics: Diagrams, Networks, Maps,
Univ. of Wisconsin Press (1983).

117