Timelines Revisited


A Design Space and
Considerations for Expressive Storytelling

Matthew Brehmer · Microsoft Research · @mattbrehmer

in collaboration with

Bongshin Lee · Benjamin Bach · Nathalie Henry Riche · Tamara Munzner
IEEE VIS 2017 · 10-03-2017 · slides: timelinesrevisited.github.io

A Timeline Design Space

representation
Linear Radial Spiral Calendar Curve
scale
Chronological Relative Logarithmic Sequential Collapsed
layout
Unified Faceted Segmented Faceted and Segmented
Image: Joseph Priestley (1765)
Image: Joseph Priestley (1765)
Image: flickr/shenghunglin
Image: LadyofHats (Wikimedia Commons)
Image: flickr/46704958@N07
Image: flickr/studiocurve
See "How to make history dates stick" by Mark Twain in Harper's Monthly Magazine (1914).

Common visual representations of time:

Linear Radial Spiral Calendar Curve

What is a Timeline For?

What happened when?


In what sequence did the events occur?
How long did the events last?
How long between event A and event B?
Did A and B co-occur?
When did A and B occur relative to event C?

The Careers of U.S. Open Golf Champions

Wikimedia Commons; L: Dustin Johnson; R: Jim Furyk

The Careers of U.S. Open Golf Champions

Data source: Wikipedia. This data is also featured in this demo video.

A Timeline Design Space

A Timeline Design Space

5 representations:
Linear Radial Spiral Calendar Curve
5 scales:
Chronological Relative Logarithmic Sequential Collapsed
4 layouts:
Unified Faceted Segmented Faceted and Segmented

The Careers of U.S. Open Golf Champions

1 / 5 representations:
Linear Radial Spiral Calendar Curve
3 / 5 scales:
Chronological Relative Logarithmic Sequential Collapsed
1 / 4 layouts:
Unified Faceted Segmented Faceted and Segmented

Our process: Phase 1


Collect and categorize 145 timelines and timeline tools.
Sources included Cartographies of Time (Rosenberg & Grafton),
Visualization of Time-Oriented Data (Aigner et al.), Making Timelines (Groeger), ...

Our process: Phase 2


Validate with 118 additional timelines (263 total).
Sources included visual.ly, the Kantar IIB Showcase, massvis.mit.edu, ...

Implement points in the design space with
28 representative datasets.

Survey data and dataset index can be found at timelinesrevisited.github.io
20 purposeful, interpretable, & generalizable
timeline designs at timelinesrevisited.github.io

Expressive Storytelling With Timelines


Choice of representations and time scales
Support for chronological or non-chronological narratives

The daily routines of famous creative people

Inspired by infographics by Podio and info we trust; data source: Daily Rituals: How Artists Work by Mason Currey (2013)

Summary: The Timeline Design Space


Different combinations of timeline representation and scale
communicate different aspects of the data.

Summary: Storytelling Considerations


Use animated transitions, highlighting, and annotation
to incrementally reveal and connect narrative points.


Consider more than one point in the design space.

Timelines Revisited . . . Revisited:

An Epilogue

timelinestoryteller.com
Choice of representation, scale, layout, & narrative structure,
Initially released as open-source web application,
Featured at OpenVisConf 2017,
Now available as free add-on for Microsoft Power BI,
Featured in the 2017 Data Insights Summit keynote,

Thanks


Bongshin Lee, Benjamin Bach,
Nathalie Henry Riche, and Tamara Munzner.
+
Darren Edge, Chris White, David Tittsworth, Kate Lytvynets
Microsoft Research, HCI@MSR,
the UBC InfoVis Group, the Timeline Consortium,
Microsoft Power BI, & the MSFT Data Journalism Program.
timelinesrevisited.github.io
TVCG paper, slides, galleries, survey, datasets.
timelinestoryteller.com
open-source tool for web & Power BI
mabrehme@microsoft.com · mattbrehmer.github.io · @mattbrehmer