Tools for Expressive Information Visualization Design @ Microsoft Vancouver: 18-08-01

Tools for Expressive Information Visualization Design

A Showcase of Projects from the
MSR Data-Driven Storytelling Team

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

Postdoctoral Researcher · Microsoft Research Microsoft Vancouver Data Visualization Symposium, 2018-08-01 · slides: mattbrehmer.github.io/talks/180801

Data-Driven Storytelling at Microsoft

aka.ms/storytellingwithdata

Project Showcase:

ChartAccent (2016) · Timeline Storyteller (2017) · Charticulator (2018)

In Collaboration With...

External Collaborators: Donghao Ren (UCSB), Tobias Höllerer (UCSB), Eun Kyoung Choe (UMD), Benjamin Bach (University of Edinburgh), Tamara Munzner (UBC)

Microsoft Research Special Projects (a.k.a. Project Essex): David Tittsworth, Darren Edge, Kate Lytvynets, Chris Trevino, Nathan Evans, Christopher White

Microsoft Power BI

The Microsoft Data Journalism Program

powerbi.microsoft.com | powerbi.microsoft.com/datajournalism

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)

Forms of Annotation

chartaccent.github.io

Create annotated & accentuated charts with a few clicks.

In the browser or in Power BI (bar and line charts).

Timeline Storyteller

A tool for designing and presenting
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.
Based on design research conducted in collaboration with Benjamin Bach (University of Edinburgh) and Tamara Munzner (UBC).

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.

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?

A Timeline Design Space

representations:
Linear

scales:

layouts:

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

Timeline Storyteller for the web and Power BI

Choice of representations and time scales
Incrementally reveal, hide, highlight, and annotate
Export, share, and present

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.

Results

Power BI version: 14K+ downloads, 2K unique monthly users, 35K+ YouTube views, 30+ tech news / blog posts, several community-produced tutorials.

Web version: 223 cases where authors opted into sharing their unique exported content with us.

Storytelling contest: 7 entries, 1 winner, 1 honorable mention.

Power BI Community Storytelling Contest

Contest Honorable Mention

Tropical Cyclones by Manga Solutions

Contest Winner

TV Network Ratings by Pragmatic Works

More About Timeline Storyteller

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

Timeline Storyteller

A tool for designing and presenting
visually expressive timeline narratives.
timelinestoryteller.com

Charticulator

Create bespoke chart layouts without programming.
charticulator.com
By Donghao Ren (UCSB), Bongshin Lee, and Matthew Brehmer
with Nathan Evans, Chris Trevino, David Tittsworth, and Kate Lytvynets.

charticulator.com

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

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

charticulator.com
open-source tool for the web

mabrehme@microsoft.com · mattbrehmer.github.io · @mattbrehmer Microsoft Vancouver Data Visualization Symposium, 2018-08-01 · slides: mattbrehmer.github.io/talks/180801

Chapter 11: Evaluating Data-Driven Stories & Storytelling Tools
by Fereshteh Amini, Matthew Brehmer, Gordon Bolduan, Christina Elmer, & Benjamin Wiederkehr Data-Driven Storytelling (CRC Press, 2018)