Visualizing Time


John Alexis Guerra Gómez| ja.guerrag[at]uniandes.edu.co| @duto_guerra
Jose Tiberio Hernández | jhernand[at]uniandes.edu.co
Universidad de los Andes


http://johnguerra.co/lectures/visualAnalytics_fall2017/07_Temporal_Networks_Trees/

Based onslides from Tamara Munzner

Visualizing Time

Idiom: Line chart

  • Data: Table, many timelines
  • Tasks: Compare trends and similarities (with many), locate outliers
  • Visual Representation: Line, vertical position, color hue
  • Considerations:
    • Time usually goes from left to right
Line chart

Multi-series Line chart

http://blockbuilder.org/mbostock/3884955by mbostock

idiom: Horizon charts

  • Data: Table, many timelines
  • Tasks: Compare trends and similarities (with many), locate outliers
  • Visual Representation: Line, vertical position, color luminosity (quant divergent)
  • Considerations: Uses much less space
Horizon charts

Horizon charts

http://blockbuilder.org/john-guerra/7770baa3383ab777f8ac211deeb66fbcby mbostock

Cubism

http://square.github.io/cubism/

idiom: Calendar view

  • Data: Table (years), one timeline
  • Tasks: Compare trends (by days of the week, month, year), locate outliers
  • Visual Representation: Shape, vertical/horizontal position, color hue
  • Considerations: Natural view for humans, focus on common time aggregations
Calendar view

Calendar View

http://blockbuilder.org/mbostock/4063318by mbostock

idiom: Radial timelines

  • Data: Table (years), one timeline
  • Tasks: Compare trends (by days of the week, month, year), locate outliers
  • Visual Representation: Line, Radial position, color hue (rainbow :( )
  • Considerations: Appeals to cyclic nature of time
radial_heatmapl http://www.climate-lab-book.ac.uk/spirals/

Circos.js

http://nicgirault.github.io/circosJS/demo/

Stacked Area chart

http://blockbuilder.org/mbostock/3020685by mbostock

Stacked Radial Area

http://blockbuilder.org/mbostock/3048740by mbostock

HCIL work on Temporal events

http://www.cs.umd.edu/hcil/temporalviz/

Time searcher

http://www.cs.umd.edu/hcil/timesearcher/

Lifelines

http://www.cs.umd.edu/hcil/lifelines/

Lifelines

http://www.cs.umd.edu/hcil/lifelines/

Lifelines 2

http://www.cs.umd.edu/hcil/lifelines2/

Lifelines 2 demo

Lifelines 2 video link

Similian

http://www.cs.umd.edu/hcil/similan

Similian demo

Similian video link

LifeFlow

http://www.cs.umd.edu/hcil/lifeflow/

LifeFlow howto

LifeFlow demo

EventFlow

http://hcil.umd.edu/eventflow/

EventFlow demo

Visualizing Networks

Newsmap

http://newsmap.jp/