Expressive Visualization Tools for Data-Driven Storytelling

Expressive Visualization Tools for
Data-Driven Storytelling

Matthew Brehmer | mattbrehmer.github.io | @mattbrehmer

In collaboration w/ Bongshin Lee, Nathalie Henry Riche,

The EPIC Group @ Microsoft Research, interns, academic colleagues
Presentation at ASA SDSS 2019-05-30 · slides: mattbrehmer.github.io / talks / sdss190530

Interactive & Expressive Visualization Tools

ChartAccent (2016) | Timeline Storyteller (2017)

Charticulator (2018) | DataToon (2019)

Our Expressive Visualization Tools for Storytelling

· Not intended for exploratory data analysis

· Authoring, not design

· Correctly formatted, clean data

· Interactive browser-based tools: no programming required

· Anticipating alternative export and re-use scenarios

· Available to the public, free, open-source*

*DataToon public / open-source release is forthcoming.

Before I speak about the individual tools, I'll outline some of their commonalities.

While the term "storytelling" can be overloaded, the term is useful when distinguishing data analysis tools and presentation or visual communication tools.

Our tools assume that when you've already done your exploratory data analysis via some other means and identified some finding or insight that you want to communicate.

They also assume that your data is clean and correctly formatted.

Furthermore, these tools assume that you have a visualization design in mind. They are not visualization recommender systems.

Instead, they are visualization authoring tools, allowing you to realize your intended visualization design.

And they are interactive tools, intended either for people who don't have the time or experience to employ a programmatic approach to visualization such as D3 or Vega.

These tools also allow you to easily export content, in all cases as static images, and in some cases as interactive presentations, as animated GIFs, or as reusable content that can be ingested in Microsoft's Power BI software.

Finally, with the exception of DataToon, the first three tools I'll present are open-source and freely available for you to use in your browser. I believe that a public DataToon release is forthcoming.

Considerations for Storytelling with Visualization

· Fine control over visual encoding choices

· Informative annotations and captions

· Selective emphasis and highlighting

· Sequential reveal of information over time and space

Interactive & Expressive Visualization Tools

ChartAccent (2016) | Timeline Storyteller (2017)

Charticulator (2018) | DataToon (2019)

ChartAccent: Annotation for Data-Driven Storytelling.
Ren, Brehmer, Lee, Höllerer, and Choe.
In Proceedings of the 2017 IEEE PacificVis Symposium.

chartaccent.github.io | github.com/chartaccent

“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 Data Editor

Annotating Points and Values

Annotating Ranges

Annotating Sets and Other Annotations

chartaccent.github.io | github.com/chartaccent Also available as custom visuals for Power BI.

Interactive & Expressive Visualization Tools

ChartAccent (2016) | Timeline Storyteller (2017)

Charticulator (2018) | DataToon (2019)

Timeline Storyteller: The Design & Deployment of an Interactive Authoring Tool for Expressive Timeline Narratives.
Brehmer, Lee, Henry Riche, Tittsworth, Lytvynets, Edge, and White.
In Proceedings of the 2019 Computation + Journalism Symposium.

timelinestoryteller.com | github.com/Microsoft/timelinestoryteller

The Daily Routines of Famous Creative People

Story inspired by infographics by Podio and info we trust (RJ Andrews).
Data source: Daily Rituals: How Artists Work by Mason Currey (2013)

To give you an example of a way to present timelines, I want to show you a brief presentation 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 other creative types.

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

NEXT: I had wondered if there was any pattern as to when creative people do their creative work.

It turns out that at least among these people, some creative 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 odd ones like Kafka who work all night long.

NEXT: I had also wondered about the potential relationship between sleep and creativity, so let me focus your attention to these blue arcs.

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

A third question I had was about variation and creativity. Let me show you how often these creative people change activities throughout their day.

NEXT: This 24-hour clock metaphor isn't the best way to convey the number or heterogeneity of activities, so I'm going to transition to a just show you a sequence of activities without any duration, effectively resulting in a radial bar chart.

NEXT: To show who varied the most and least among these people, a linear representation is probably better, where you can see that Darwin has the most varied day of all the people here while Murakami prefers less variation.

NEXT: Finally, I'll restore the duration of events so that you can compare these timelines just by scanning up and down, where you might spot times where some routines appear to be in sync with one another, such as when people work or sleep at the same time.

And this is a good time to ask you to compare your own daily rhythm to these creative people.

When do you sleep, eat, or do you best creative work?

Timelines Revisited:
A Design Space & Considerations for Expressive Storytelling.
Brehmer, Lee, Bach, Henry Riche, and Munzner.
In IEEE Trans. Visualization & Computer Graphics, 2017.

Timelines are visual representations of categorical event sequences.

How have people drawn timelines over the course of history?

... A survey of 250+ timelines and timeline tools.

timelinesrevisited.github.io

Timelines Revisited:
A Design Space & Considerations for Expressive Storytelling.
Brehmer, Lee, Bach, Henry Riche, and Munzner.
In IEEE Trans. Visualization & Computer Graphics, 2017.

Representation
Linear

Scale

Layout
Unified

It turns out that there are many ways to present timelines.

You can represent time in various ways: linearly, radially, or by using spirals, grids such as calendars, or along a curve

And you can combine these representations with different time scales: you could use an absolute or relative chronological scale, a logarithmic scale for extremely long-spanning timelines, or you could use a purely sequential scale.

And then there's "Layout", or how to draw one or more timelines within a page or display:

This has to do with deciding between a single timeline, faceting into multiple timelines (like how I did for each creative person),

Or wrapping a single timeline into meaningful segments of time, like a decade or a century.

Different combinations of representation, scale, & layout
serve different communicative goals.

Anticipate chronological or non-chronological narratives.

Incrementally reveal, selectively highlight & annotate to direct attention.

timelinestoryteller.com | interactive tool for the browser or Power BI

github.com/Microsoft/timelinestoryteller | open source

openvisconf.com/2017 | What Story Does Your Timeline Tell?

In this IEEE TVCG paper I make the case that timeline design tools should provide alternative representations of time, time scales, and layouts,

As different combinations of these serve different communicative tasks.

For instance, sometimes I want to emphasize sequence without duration, other times periodicity.

I also discuss in this paper how existing timeline tools also tend towards a chronological narrative:

Either the whole timeline is shown as a static image, so readers are likely to begin at the start of the timeline, or events are revealed in chronological order, one event at a time as a series of slides.

For some stories, a chronological introduction of events makes total sense, while for others it does not,

Like how in my story about the routines of creative people, I revealed and highlighted aspects of those timelines in an order that wasn't chronological starting at midnight.

To achieve this expressive narrative design, you should make use of animation, highlighting, and annotation to incrementally reveal parts of a narrative (that may not be chronological), to allow the viewer to make new comparisons.

Each of these considerations were realized in the tool Timeline Storyteller.

Interactive & Expressive Visualization Tools

ChartAccent (2016) | Timeline Storyteller (2017)

Charticulator (2018) | DataToon (2019)

Charticulator: Interactive Construction of Bespoke Chart Layouts.
Ren, Lee, and Brehmer.
In IEEE Trans. Visualization & Computer Graphics, 2019.

Honorable Mention for Best Paper at IEEE InfoVis 2018.

Shortlisted for the 2018 Kantar Information is Beautiful Awards.

charticulator.com | github.com/Microsoft/Charticulator

charticulator.com | github.com/Microsoft/Charticulator

Interactive & Expressive Visualization Tools

ChartAccent (2016) | Timeline Storyteller (2017)

Charticulator (2018) | DataToon (2019)

DataToon:
Drawing Dynamic Network Comics With Pen + Touch Interaction.
Kim, Riche, Bach, Xu, Brehmer, Hinckley, Pahud, Xia, McGuffin, & Pfister.
In Proceedings of the 2019 ACM CHI Conference.

aka.ms/DataToon

Reflecting on the Evaluation of Visualization Authoring Systems.
Ren, Lee, Brehmer, & Henry Riche.
In Proceedings of the 2018 BELIV Workshop (Evaluation & Beyond).

Typical evaluation metrics (time, error) are not very relevant.

Post-deployment content analysis and chart reproduction studies.

aka.ms/renbeliv18

In the course of developing these visualization tools over the past few years,

My collaborators and I have also put some thought into how we evaluate tools like these.

With visual analysis tools, there are often benchmark datasets and analysis tasks, and human factors studies can measure task completion time and error rates.

However, task completion time and error rate don't apply so well to visualization authoring tools.

Instead, we're mainly interested in expressivity, or whether a wide gamut of visualization design choices can be reached within these tools.

Given this focus on expressivity, the evaluation of tools like these often involves think-aloud chart reproduction studies, where we try to understand all the possible ways that a particular design can be achieved,

We also tend to publicly deploy these tools as a way to better understand how people use them with their own data and on their own time,

The challenge here can be in engaging with the community, encouraging people to share what they create in contests or on social media channels; we've tried both in the case of Timeline Storyteller and Charticulator.

Closing Thoughts / Looking to the Future

· What does expressivity mean? How do we achieve it?

· Maximize expressivity without programming / mouse + keyboard?

· Visualization authoring for consumption beyond the desktop

· Beyond authoring: supporting design, exploration, data prep

Expressive Visualization Tools for
Data-Driven Storytelling

Matthew Brehmer | mattbrehmer.github.io | @mattbrehmer

In collaboration w/ Bongshin Lee, Nathalie Henry Riche,

The EPIC Group @ Microsoft Research, interns, academic colleagues

mattbrehmer.github.io / talks / sdss190530 | slides Presentation at ASA SDSS 2019-05-30