Timelines Revisited @ UBC 17-10-24

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 TVCG 2017 · 10-24-2017 @ UBC CPSC 547 · slides: timelinesrevisited.github.io/ubc-slides

A Timeline Design Space

representation
Linear

scale

layout

Image: Joseph Priestley (1765)

Image: flickr/shenghunglin

Image: LadyofHats (Wikimedia Commons)

Image: © Georgia Lupi (dear-data.com)

Image: flickr/46704958@N07

flickr/27659329@N05

flickr/26639011@N06

Blanchett's Catholic Ladder (1838). Reference: Cartographies of Time (2010) by Rosenberg & Grafton

Image: flickr/studiocurve

Peabody’s Polish American System of Chronology (mid 19th century). Reference: Klein et al. (2016): shapeofhistory.net

In a way, the calendar is like a bookshelf, where each shelf might be a week with seven books it.

But the shelf-calendar metaphor works for larger granularities of time, like decades, centuries, and millennia.

One instantiation of this shelf metaphor is is Elizabeth Peabody's Polish American system of chronology from the mid-19th-century, which she proposed as an aid for teaching history, where each is century a 10 by 10 grid, each decade is a row and each cell a year, colored and patterned in according to the type of events that occurred in that year.

If you're interested in learning more about this approach, I suggest checking out an interactive revival of Peabody’s method by Lauren Klein and her colleagues in the digital humanities lab at Georgia Tech, at shapeofhistory.net

See "How to make history dates stick" by Mark Twain in Harper's Monthly Magazine (1914).

Common visual representations of time:

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.

MAX: What you're seeing here are two timelines, Furyk's is on top, Johnson's on the bottom, indicating the results of every U.S. Open appearance in their respective careers.

With red indicating a victory, gold indicating a finishing placement, and grey indicating that they were cut from the tournament after the first 36 holes.

NEXT: You can see that Furyk has appeared at the U.S. Open for longer than Johnson, and that they both have only one victory to date under their belt.

NEXT: In comparison, golf legend Ben Hogan appeared many times over the course of 4 decades, and he won an impressive four times during a six year span in the late 1940s / early 1950s.

NEXT: Johnson and Furyk never played with Hogan, they were born at different times, and it's a bit unfair to compare a mid-career golfer and an early-career golfer to a legend like Hogan.

NEXT: But by changing the scale to one that is relative to their births, we can see if Johnson or Furyk are on track to follow in Hogan's footsteps.

we can also see that Johnson and Furyk were about the same age when they won the U.S Open.

Hogan was older during his winning streak, but perhaps he would have won earlier during the gap in his early 30s, which corresponds to World War II and years that the tournament was cancelled.

NEXT: Or we can remove relative chronology altogether and keep just the sequence of their U.S. Open appearances, where we learn that, coincidentally, all 3 golfers won in their 9th appearance.

NEXT: And finally I can introduce you to another legend, Jack Nicklaus, who appeared more than 40 times, and his 4 victories were more spaced out than Hogan's.

A Timeline Design Space

5 representations:
Linear

5 scales:

4 layouts:
Unified

The Careers of U.S. Open Golf Champions

1 / 5 representations:
Linear

3 / 5 scales:
Chronological

1 / 4 layouts:
Unified

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

So now that we have all of these design choices, how do we use these design choices to tell stories with timelines?

CLICK: In other words, how do combine different points in this design space?

This is important because despite the variety of ways that we visually represent and scale time, existing timeline presentation tools limit us linear representations and chronological time scales.

CLICK: Existing tools also tend towards a chronological narrative: either the whole timeline is shown up front, so readers are likely to begin at the start of the timeline, or events are revealed in chronological order.

For some stories, a chronological introduction of events makes sense, while for others it does not, like in my golf example, in which I revealed the careers of golf legends Ben Hogan and Jack Nicklaus later, adding context to the careers of current golfers.

To achieve this expressive narrative design, we can make use of animation, highlighting, and annotation to incrementally reveal parts of a narrative and make new comparisons.

Other Timeline Tools: Timeglider

Other Timeline Tools: Timeline.JS

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)

As a second example that ties all of this together, I'm going to present a story about the daily routines of famous creative people.

MAX: What you see here is a set of radial timelines depicting a typical 24 hours in the lives of 26 writers, artists, composers, and the like.

When they work, eat, sleep, exercise, and do other activities.

NEXT: A good starting point is to ask: when do creative people create? Are people similar in this regard?

It looks as though some people prefer to work in short, focused bursts, like Darwin or Kant, while people like Murakami and Voltaire get up early and work for long uninterrupted periods of time.

Meanwhile, you have people like Kafka who work all night long.

NEXT: We can also ask about the relationship between sleep and creativity: how much? how often? and when do creative people sleep?

Most people in this dataset sleep at night, with notable exceptions like Balzac who would turn in at 6pm, and Kafka, who just seemed to keep odd hours.

What about variation and creativity? How often should you change activities if you want to be creative?

NEXT: This chronological scale isn't the best way to convey the number or heterogeneity of activities, so let's transition to a sequential scale.

NEXT: To determine who varied the most and least, a linear representation is perhaps best, where we can easily see that Darwin has the most varied day of all the people in this dataset,

while Murakami prefers less variation.

NEXT: Finally, we can restore chronology to compare these timelines just by scanning up and down, to spot synchronocities like who tends to work or sleep at the same time.

And this is a good design choice to close with, to invite the viewer to compare their own daily rhythym to these creative people.

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,
Now available as free add-on for Microsoft Power BI

Timeline Storyteller Youtube Tutorial

powerbi.microsoft.com/blog/what-story-does-your-timeline-tell-introducing-the-timeline-storyteller-custom-visual-for-microsoft-power-bi/

Timeline Storyteller on the Power BI Blog

"When humans began transforming information and pictures to enhance understanding, two of the first things they visualized were space and time. Timeline Storyteller is the latest landmark in a tradition that spans centuries, and what a great accomplishment it is"

- Alberto Cairo,
Knight Chair at the University of Miami powerbi.microsoft.com/blog/what-story-does-your-timeline-tell-introducing-the-timeline-storyteller-custom-visual-for-microsoft-power-bi/

Thanks

co-authors: Bongshin Lee, Benjamin Bach
Nathalie Henry Riche, 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