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_fall2019/07_Temporal/

Based onslides from Tamara Munzner

Visualizing Time

Temporal Datasets

  • One attrib+ has a timestamp (at any level)
  • Granularity ("Year/Month/Day" vs "Year/Month/Day Hour")
    • Truncate
    • Datepart
  • Sometimes is Cyclic
  • Seasonality

Idioms

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/

Joyplots

https://blockbuilder.org/john-guerra/2bb5a08bd6f17a5cb4efd6ad6d98973c

Joyplot vega-lite

https://observablehq.com/@vega/psr-b1919-21-with-vega-lite

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/

Gant charts

  • Data: Two time attribs (start end)
  • Tasks: Summarize duration (features), compare events, identify intersections/dependencies
  • Visual Representation: Line, express for time, separate/order/aligned for tasks, color hues
Gant Charthttps://observablehq.com/@john-guerra/mids-assignments-timeline

D3 Radial

Stacked Area chart

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

Stacked Radial Area

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

Stacked Radial Area

https://observablehq.com/@d3/radial-area-chart

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

Common Derives/Tricks for Temporal data

Align by event

Add / Remove Granularity

Extract dateparts

Window average/median

Seasonality

Loose scales

http://johnguerra.co/viz/influentials/chi2019/tweets.html