Timelines Revisited

Timelines Revisited:

Considerations for Expressive Storytelling

Matthew Brehmer · Microsoft Research · @mattbrehmer
Linear

07-2017 timelinesrevisited.github.io/slides

Representing Time in Space

Where is:

Yesterday?

The Big Bang?

The 2050s?

Dinner time?

Now?

The Triassic Period?

Your 8th Birthday?

The 15th Century?

Some visual representations of time:

flickr/librarianishish

Joseph Priestley (1765)

flickr/shenghunglin

LadyofHats (Wikimedia Commons)

flickr/46704958@N07

flickr/27659329@N05

flickr/26639011@N06

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

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

M. Twain (1914). "How to make history dates stick". Harper's Monthly Magazine.

Some visual representations of time:

What is a Timeline For?

What happened when?
When and how much?
Where, what, and when?
What was related when?
What if and when?

Noun Project icons : @olsjoe, @mabusafiah, @makeiev, @barracuda, @ratch0013

What happened when?
When and how much?
Where, what, and when?
What was related when?
What if and when?

Noun Project icons : @olsjoe, @mabusafiah, @makeiev, @barracuda, @ratch0013

What happened when?

In what sequence did the events occur?

How long were the events?

Did events A and B co-occur?

When did events A and B occur relative to event C?

Here I've redrawn Salvador Dali's biography based on the original Accurat graphic.

You can see his artistic periods like Surrealism and Dada and his travel to places like Paris.

And here is Matisse now shown alongside him. Using a common chronological scale, you notice that were born at different times, and you can see when their respective Cubist and Abstract periods took place and how they might have influenced one another.

When I change the scale to one relative their birth dates, you can now more easily compare the age at which they started their art career, how long they lived; and point out similarities like how they both traveled to Paris in their early 30s,

or I can filter this data and remove the aspect of chronological duration altogether, retaining just a sequential ordering of their artistic periods.

Ultimately, each of these transformations resulted in a different timeline, telling a different story.

A Timeline Design Space

journal paper + survey + example galleries at timelinesrevisited.github.io

Storytelling With Timelines

chronological Narrative:

Dalí was born,
THEN he started painting,
THEN moved to Paris, …

non-chronological Narrative:

Dalí lived in Paris during his Surrealist period,
… MEANWHILE, Matisse was in Italy, … ,
YEARS EARLIER, he too lived in Paris, …

Expressive Storytelling With Timelines

Support for chronological or non-chronological narratives

Choice of representations for time

Choice of time scales

Timeline Storyteller

Support for chronological or non-chronological narratives

Choice of representations for time

Choice of time scales

Annotate, emphasize, reveal

Let’s look at how it works. So when I open Timeline Storyteller I begin with this dialog where I can load my own JSON or CSV tabular data. In this example, I’ll recreate the Dali vs. Matisse story I showed earlier.

Each row in this dataset describes an event. Since I’m going to facet these events to compare different painters, I have a FACET column containing the painter’s name, an event category, a start date, some events like lifespans and artistic periods also have end dates, and an event description that I’ll use for text annotations.

When I load this data in Timeline Storyteller, I first get a summary of what’s in my data, its chronological range, the categories of events, and the facets in my dataset.

And when I initially draw the data I get a single linear, chronological timeline. This isn’t faceted yet by painter, so I select a faceted layout to split this into individual timelines for each facet.

Next I want to filter what I see to focus on Dali and Matisse, so I use a filtering control to hide the facets that I don’t want.

I can then click on events to annotate them, and I can position these annotations wherever I want.

And when I’m satisfied, I can record this as a scene, which appears down in my scene navigator.

The Careers of U.S. Open Champions

Timeline Storyteller for Power BI: A Demo Story

The Timeline Design Space

Different combinations of timeline representation and scale
tell different stories about your data.

Storytelling Considerations

Don't limit the story by using a single design space combination.

Use animated transitions and annotation for incremental reveal,
and to connect consecutive narrative points.

Collaborators:

Bongshin Lee, Nathalie Henry Riche, Tamara Munzner, Benjamin Bach,

Darren Edge, Chris White, David Tittsworth, and Kate Lytvynets.

More Information:

timelinesrevisited.github.io: IEEE TVCG paper + survey website
timelinestoryteller.com: open-source tool for web and Power BI
OpenVisConf 2017: "What Story Does Your Timeline Tell?"
github.com/TimelineConsortium: toward a standard for timeline data

Matthew Brehmer · Microsoft Research · @mattbrehmer

July 2017 timelinesrevisited.github.io/slides