Visualizing
Temporal Data
MIDS W209: Information Visualization

John Alexis Guerra Gómez | john.guerra[at]gmail.com | @duto_guerra
https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/07_Time/
Partially based on slides from Tamara Munzner

What We Are Going to Learn

  • Line charts
  • Area charts
  • Other representations
  • Radial idioms
  • Modern represtations
  • HCIL work on temporal
  • Tips
University Of California at Berkeley logo

Visualizing Time

Temporal Datasets

  • One attribute has a timestamp (at any level)
  • Granularity ("year/month/day" vs. "year/month/day/hour")
    • Truncate
    • Datepart
  • Sometimes is cyclic
  • Seasonality
University Of California at Berkeley logo

Line Charts

Idiom: Line Chart/Dot Plot

  • One key, one value
  • Data: two quantitative attributes
  • Mark: points and line connection marks between them
  • Channels:
    • Aligned lengths to express quant value
    • Separated and ordered by key attribute into horizontal regions
  • Task: find trend
    • Connection marks emphasize ordering of items along key axis by explicitly showing relationship between one item and the next
  • Scalability: hundreds of key levels, hundreds of value levels
Linechart example

Choosing Bar vs. Line Charts

  • Depends on type of key attribute
    • Bar charts if categorical
    • Line charts if ordered
  • Do not use line charts for categorical key attributes
    • Violates expressiveness principle
    • Implication of trend so strong that it overrides semantics!
      • “The more male a person is, the taller he/she is.”
Barchart vs Linechart
after [Bars and Lines: A Study of Graphic Communication. Zacks and Tversky. Memory and Cognition 27:6 (1999), 1073–1079.]

Line Chart Aspect Ratio

  • 1: banking to 45 (1980s)
    • Cleveland perceptual argument: most accurate angle judgement at 45
  • 2: multi-scale banking to 45 (2006)
  • 3: arc length-based aspect ratio (2011)
Dual Axis
https://github.com/jennybc/r-graph-catalog/tree/master/figures/fig07-02_annual-report-aspect-ratio-2

Idiom: Dual-Axis Line Charts

  • Controversial
  • Acceptable if commensurate
  • Beware, very easy to mislead!
Dual Axis
Ben Jones @DataRemixed

Idiom: Indexed Line Charts

  • Data: two quantitative attributes
    • One key and one value
  • Derived data: new quantitative value attribute
    • Index
    • Plot instead of original value
  • Task: show change over time
    • Principle: normalized, not absolute
  • Scalability same as standard line chart
University Of California at Berkeley logo

Area Charts

Idiom: Streamgraph

  • Generalized stacked graph
    • Emphasizing horizontal continuity
    • Vs. vertical items
  • Data:
    • One categorical key attribute (artist)
    • One ordered key attribute (time)
    • One quantitative value attribute (counts)
    • Derived data
  • Mark: layers (areas)
    • Height encodes counts
  • One quantitative attribute (layer ordering)
  • Scalability:
    • Hundreds of time keys
    • Dozens to hundreds of artist keys
      • More than stacked bars, since most layers don’t extend across whole chart
Streamgraph
[Stacked Graphs Geometry & Aesthetics. Byron and Wattenberg. IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis 2008) 14(6): 1245–1252, (2008).]

Streamgraph RIO2016

Streamgraph RIO2016 NY times
http://www.nytimes.com/interactive/2016/08/08/sports/olympics/history-olympic-dominance-charts.html?_r=0

Stacked Area Charts

  • Similar to streamgraphs
  • Task: identify trends in total
  • More accurate
  • Less fancy (enjoy)
  • Choose first category wisely
Stacked Area Charthttps://observablehq.com/@d3/stacked-area-chart
University Of California at Berkeley logo

Other Representations

Gantt Charts

  • Data: two time attributes (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 Chart
https://observablehq.com/@john-guerra/mids-assignments-timeline

Idiom: Slopegraphs

  • Two values
  • Data:
    • Two quantitative value attributes
    • (One derived attribute: change magnitude)
  • Mark: point and line
    • Line connecting mark between points
  • Channels:
    • Two vertical points: express attribute value
    • (Line width/size, color)
  • Task: emphasize changes in rank/value
  • Scalability: hundreds of value levels
Slope chart
https://observablehq.com/@joakimdalen/sleep

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

Breaking Conventions

  • Presentation vs. exploration
  • Engaging/evocative
  • Inverted y-axis
  • Blood drips down on Poe
[Slide inspired by Ben Jones]
Edgar Allan Poe
https://public.tableau.com/profile/ben.jones#!/vizhome/EdgarAllanPoeViz/EdgarAllanPoeViz
University Of California at Berkeley logo

Radial Idioms

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/

Idiom: Radial Barchart

University Of California at Berkeley logo

Modern Representations

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

Joyplots

Idiom: Connected Scatterplots

  • Scatterplot with line connection marks
    • Popular in journalism
    • Horizontal and vertical axes: value attributes
    • Line connection marks: temporal order
  • Empirical study
    • Engaging, but correlation unclear
Connected Scatterplot
http://steveharoz.com/research/connected_scatterplot/

Idiom: Connected Scatterplots (cont.)

  • Alternative to dual-axis charts
    • Horizontal: time
    • Vertical: two value attributes
Connected Scatterplot vs Dual Axis
http://steveharoz.com/research/connected_scatterplot/

Timelines Revisited

Timlines Revisited
Timelines Revisited: A Design Space and Considerations for Expressive Storytelling" By Matthew Brehmer, Bongshin Lee, Benjamin Bach, Nathalie Henry Riche, and Tamara Munzner
University Of California at Berkeley logo

HCIL Research

Summary of HCIL Projects in Temporal Visualizations

Time Searcher

Visual Exploration of Time-Series Data

Lifelines

LifeLines for Visualizing Patient Records

Lifelines (cont.)

LifeLines for Visualizing Patient Records

Lifelines 2

Lifelines2: Discovering Temporal Categorical Patterns Across Multiple Records

Similian

Similan: Finding Similar Records from Temporal Categorical Data

LifeFlow

LifeFlow: Understanding Millions of Event Sequences in a Million Pixels

LifeFlow How-To

LifeFlow Demo

EventFlow

EventFlow: Visual Analysis of Temporal Event Sequences and Advanced Strategies for Healthcare Discovery

EventFlow Demo

University Of California at Berkeley logo

Common Derives/Tricks for Temporal Data

Align by Event

Add/Remove Granularity

Truncate dates

Aggregate by date parts

Window Average/Median

Covid Moving Average by state
NY Times How Coronavirus Cases Have Risen Since States Reopened July 9th 2020

Seasonality

Loose Scales

Interaction network in chi2019
University Of California at Berkeley logo

Temporal with D3

Multi-Series Line Chart

Multi-Series Line Chartby mbostock

Streamgraph

Streamgraph

Linechart

Line Chart

Stacked Area Chart

Stacked Area Chartby mbostock

Stacked Radial Area

Stacked Radial Areaby mbostock

Stacked Radial Area (cont.)

Radial Area Chart

Calendar View

Calendar Viewby mbostock
University Of California at Berkeley logo

What We Learned

  • Line charts
  • Area charts
  • Other representations
  • Radial idioms
  • Modern represtations
  • HCIL work on temporal
  • Tips
University Of California at Berkeley logo