Interactive Horizon Graphs

Interactive Horizon Graphs are an unification of two visualization techniques for time series: Reduced Line Charts and Horizon Graphs. The two techniques are unified using a variant of pan and zoom interaction to increase the number of time series that can be analyzed in parallel.

For more informations about "Horizon Graphs", see The development of the Horizon Graph from H. Reijner and Time on the Horizon from S. Few.

Article

Charles Perin, Frédéric Vernier, Jean-Daniel Fekete. Interactive Horizon Graphs: Improving the Compact Visualization of Multiple Time Series. Proceedings of the 2013 Annual Conference on Human Factors in Computing Systems (CHI 2013), Apr 2013, Paris, France. ACM

Video

Poster

Perin, C., Vernier, F., and Fekete, J. 2012. Progressive Horizon Graphs: Improving Small Multiples Visualization of Time Series. Poster at Infovis'12 (Seattle, Canada, October 14 - 19, 2012).

Web Implementation

Interactive Horizon Graphs in d3

Use only Chrome to be able to interact with both the Pan and the Zoom: FF is slow and does not handle the Pan, and Safari is incredibly slow.

Control the values of "Pan and Zoom":

  • Zoom interaction:
    • Drag the LEFT mousebutton on any chart. Drag up/down to increase/decrease the zoom factor.
  • Pan interaction:
    • Drag the lEFT mousebutton on any chart. Drag left/right to increase/decrease the pan value (i.e. the value of the baseline).

Number of charts: (Up to 4, javascript starts to be slow...)

Thanks to Romain Vuillemot for implementing the first version of Interactive Horizon Graphs using d3.

Contacts

E-mail all co-authors

  • Charles Perin, INRIA and LIMSI-CNRS
  • Frederic Vernier, LIMSI-CNRS
  • Jean Daniel Fekete, INRIA