Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 01 - Aufgabe 3 - Technique

From InfoVis:Wiki
Revision as of 17:20, 26 May 2009 by PKlinka (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search



SpiraClock is a visualization technique using an analog clock and an integrated spiral to show nearby events. It is a combination of the well known time-visualization techniques Timeline and Timeband [Dürsteler, 2006] and an enhancement to regular calenders, timetables or pop-up reminders providing a continuous non-intrusive display of upcoming events.

Animated SpiraClock

The basic concept of SpiraClock is to create a time-management device that is less intrusive (no alerts or pop-ups) and more intuitive (using a regular analog clock) than existing calenders. For this purpose a spiral, representing the near future (usually the next hours), is added to a regular clock. Upcoming events are visualized as colored blocks within the spiral. Events occurring within the next hour are displayed on the outermost branch of the spiral, more distant events are displayed closer to the center of the spiral. Past events fade out as the minute hand of the clock passes them. Different colors, transparency and tool-tips can each be used to add additional information to the events.

Example questions this visualization solves[edit]

  • What time is it?
  • When does the next event start?
  • How long does an event last?
  • How many events are in the near future (depends on the spiral depth).
  • Show information for the selected event.


Example usage of a SpiraClock

The information displayed in the SpiraClock example above includes:

  • The time now is 12:11 (read as a normal analog clock).
  • The blue event starts at 12:15 (in four minutes) and lasts until 12:22 (for 7 minutes).
  • The red event starts at 12:55 and lasts until 13:40 (that time is in the second spiral branch from the outside, indicating it is between one and two hours away).

Target Group[edit]

  • Office workers usually sit in front of their PC most of the time and already use it for managing their calendars and timetables. They are therefore already accustomed to the concept of using a computer for time-management and could easily add the SpiraClock to their timekeeping devices.
  • Students: SpiraClock is especially useful for managing events with short durations that the user needs to be reminded of only close to the beginning of the event. Students can therefore use SpiraClock to keep track of their lectures, etc. Additionally students are more likely to try out and accept this new concept of timekeeping.
  • Anyone using a computer clock as their primary clock can also use SpiraClock, as it only enhances the capabilities of a standard analog clock by the discussed features. Users therefore simply add additional functionality to a program they already use.

Visual Mapping[edit]

Two dimensions are to be displayed simultaneously: Absolute time and events (start + duration)

An analog clock displays the absolute time. A spiral nested inside the analog clock shows the nearby future. Every revolution of the spiral represents one hour. The outermost branch shows events which occur in less than one hour, the second outermost events one to two hours from now, and so on. Colored blocks inside the spiral revolutions show the start and duration of events and are also used to display information about the events (tool-tip).

Possibilities of interaction[edit]

Possible interactions with the SpiraClock include:

  • Turning the minute and/or hour hands forward and backward to advance or regress in time.
  • Zooming the spiral to display a broader or a more narrow time frame.
  • Hovering over an event with the mouse to get more information about that event (tool-tip).
  • Adding events by clicking the spiral.
  • Modifying or deleting events by clicking those events.
  • Explicitly show time (digital clock) and/or current date.
  • Change size of analog clock.
  • Display time of day (if it is night or day) by changing background color.

Which Interaction for which purpose[edit]

  • Overview/Zoom: Size of clock and zoom stage (depth of spiral) to select displayed time frame
  • Navigation: By turning the minte/hour hands back and forth navigation in time
  • Details-on-demand: Hoovering over event block displays event detail info
  • Highlighting: Automatically when event come close to "now"-time or by manual select of the user
  • Color encoding
    • Display time of day
    • Differentiate events eventually by category
    • Saturation and transparency provides info about imminence of an event


[Dragicevic and Huot, 2002] Pierre Dragicevic and Stéphane Huot. SpiraClock: a continuous and non-intrusive display for upcoming events. In CHI '02: CHI '02 extended abstracts on Human factors in computing systems, pages 604-605, Minneapolis, Minnesota, 2002. ACM Press
[Müller and Schumann, 2003] Wolfgang Müller and Heidrun Schumann. Visualization methods for time-dependent data - an overview. In WSC’03: Proceedings of the 2003 Winter Simulation Conference, Vol. 1, pages 737-745, New Orleans, 2003.
[Carlis and Konstan, 1998] John V. Carlis and Joseph A. Konstan. Interactive visualization of serial periodic data. In UIST '98: Proceedings of the 11th annual ACM symposium on User interface software and technology, pages 29-38, San Francisco, California, 1998.
[Dragicevic, 2005] Pierre Dragicevic. SpiraClock Homepage. Created at: ?. Retrieved at: November 26, 2006. http://www.emn.fr/x-info/spiraclock/.
[Tominski, 2006] Christian Tominski. SpiraClock. Created at: ? 2006. Retrieved at: November 26, 2006. http://wwwicg.informatik.uni-rostock.de/~ct/spiraclock.html.
[Dürsteler, 2006] Juan C. Dürsteler. Visualising Time. Created at: April 12, 2006. Retrieved at: November 26, 2006. http://www.infovis.net/printMag.php?num=180&lang=2.