Data-Driven Storytelling @ UBC: 17-10-24

Data-Driven Storytelling at MSFT

Introducing Timeline Storyteller & ChartAccent for Microsoft Power BI

Matthew Brehmer · mabrehme [at] microsoft.com · @mattbrehmer

Microsoft Research · Microsoft Data Journalism Program 10-24-2017, UBC Journalism 520H · slides: mattbrehmer.github.io/talks/ubc171024/

About Me

InfoVis PhD @ UBC 2011-2016, working with Tamara Munzner

Previous journalism-related work:
Overview Project (OverviewDocs.com), TimeLineCurator, contributor to forthcoming book on data-driven storytelling. mattbrehmer.github.io

Our Team's Custom Visuals for Power BI:

Timeline Storyteller & ChartAccent

(Also available as standalone web applications)

Timeline Storyteller

A tool for designing visually expressive timeline narratives.
timelinestoryteller.com
By Matthew Brehmer, Bongshin Lee, and Nathalie Henry Riche,
with Chris White, Darren Edge, David Tittsworth, and Kate Lytvynets.

Common visual representations of time:

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).

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

representations:
Linear

scales:

layouts:

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

When's the Next Solar Eclipse?

Timeline Storyteller for Power BI: A Demo Story

Summary: Storytelling with Timelines

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

Animated transitions, highlighting, and annotation
incrementally reveal and connect narrative points.

More About Timeline Storyteller

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

ChartAccent

Create annotated & accentuated charts with a few clicks.
chartaccent.github.io
By Donghao Ren (UCSB), Matthew Brehmer, Bongshin Lee,
Tobias Höllerer (UCSB), and Eun Kyoung Choe (UMD).

“the annotation layer is the
most important thing we do...
otherwise it’s a case of here it is,
you go figure it out."

- Amanda Cox,
New York Times Graphics Editor

Chart Annotation in the Wild

Examples from Characterizing Visualization Insights from Quantified-Selfers’ Personal Data Presentations by Choe et al (2015)

7 Features You'll Want in your Next Charting Tool

vis4.net/blog/2015/03/seven-features-youll-wantin-your-next-charting-tool/ by Gregor Aisch (New York Times)

A Survey of annotated charts in news media

106 surveyed charts appearing in six major news outlets: chartaccent.github.io/#section-survey

Types of Annotation Targets

Types of Annotation Targets (cont.)

Types of Annotation Forms

chartaccent.github.io

For those who prefer code: D3-Annotation

d3-annotation.susielu.com by Susie Lu (Netflix)

Coming Soon: ChartAccent in Power BI

Summary: chartaccent

Consider the design space of annotation forms and targets.

How can we apply these techniques more broadly?
(beyond bar charts, line graphs, scatterplots)

timelinestoryteller.com
open-source tool for web & Power BI

chartaccent.github.io
open-source tool for web & coming soon for Power BI

mabrehme@microsoft.com · mattbrehmer.github.io · @mattbrehmer

slides: mattbrehmer.github.io/talks/ubc171024/

Data-Driven Storytelling at MSFT

Introducing Timeline Storyteller & ChartAccent for Microsoft Power BI

About Me

Data-Driven Storytelling at Microsoft

The Microsoft Data Journalism Program

Microsoft Power BI

Power BI in Data-Driven Journalism: Examples

Power BI in Data-Driven Journalism: Examples

Power BI in Data-Driven Journalism: Examples

More Stories featuring Power BI

Power BI: Getting Started

Custom Visuals for Power BI

Our Team's Custom Visuals for Power BI:

Timeline Storyteller & ChartAccent

Timeline Storyteller

Common visual representations of time:

What is a Timeline For?

What happened when?

The Careers of U.S. Open Golf Champions

The Careers of U.S. Open Golf Champions

A Timeline Design Space

Expressive Storytelling With Timelines

Other Timeline Tools: Timeglider

Other Timeline Tools: Timeline.JS

When's the Next Solar Eclipse?

More Timeline Storyteller Stories

Summary: Storytelling with Timelines

More About Timeline Storyteller

ChartAccent

Chart Annotation in the Wild

7 Features You'll Want in your Next Charting Tool

A Survey of annotated charts in news media

Types of Annotation Targets

Types of Annotation Targets (cont.)

Types of Annotation Forms

chartaccent.github.io

For those who prefer code: D3-Annotation

Coming Soon: ChartAccent in Power BI

Summary: chartaccent