Stanford Studies Data Storytelling, Techniques, and Design

Data visualizations have the amazing ability to reveal stories within data. But, these ‘data stories’ differ from traditional forms of storytelling. News organizations including the New York Times, Washington Post, and the Guardian often use dynamic graphics in their articles. TV reporters, politicians, and activists incorporate interactive visualizations as a backdrop for stories about elections, economics, and global health.

While there are many sophisticated tools, like Infogram, for data exploration and visualization – these tools don’t craft stories and provide the supporting analysis. Today’s data visualization designers must use a complicated mix of skills that include computer science, statistics, artistic flare, and storytelling.

This is why Stanford University conducted a study to explore the design of narrative visualizations, identifying techniques for telling stories with data graphics, which we are about to share with you.

If you’d like to learn a few simple data visualization techniques to help you make better charts, download our latest eBook! 

Narrative Visualization Genres

Researchers from Stanford took an empirical approach, analyzing visualizations from online journalism, blogs, instructional videos, and visualization research. They identified seven genres of narrative visualization that can be combined with interactivity and messaging to produce varying balances of author-driven and reader-driven experiences:

• magazine style
• annotated chart
• partitioned poster
• flow chart
• comic strip
• slide show
• video

Five Case Studies of Narrative Visualization

The study collected 58 visualizations with narrative components and then attempted to identify and categorize the design features that effectively tell stories with data. Their goal was to highlight both exemplary and problematic approaches. This is what they found based on five selected case studies:

Steroids or Not, the Pursuit is On – New York Times

‘The visualization resembles a poster one might see at a science fair, with the space subdivided into smaller sections, each telling its own sub-story with charts, pictures, and text… While these elements provide seamless transitions between sections, they do not dictate the order in which the viewer explores the visualization. Rather, a path is accomplished through the use of visual highlighting (color, size, boldness) and connecting elements such as arrows and shaded trails.

When looking at the visualization, the viewer begins with the largest image, in part because of its size, central positioning, and coloring, but also because it is capped with a large headline and a picture of Bonds himself telling the viewer where to look.’

Budget Forecasts, Compared With Reality – New York Times

‘At its core, this visualization is a typical slideshow presentation augmented by two important features. First, it allows the user to determine the pace of the presentation by using the provided progress bar. And second, it allows the user to interact with the presentation by mousing-over areas of interest and by using the slider to explore different time windows.

This presentation style can be compared to a narrative pattern called ‘the martini glass’ structure, following a tight narrative path early on (the stem of the glass) and then opening up later for free exploration (the body of the glass).’

Afghanistan: Behind the Front Line – Financial Times

‘The article states the intended purpose of the graphic: to establish indicators of success by which to evaluate the development work being done in Afghanistan. A different hue (green, blue, red) is used to color the map for each tab, providing a semantically consistent color encoding; brightness encodes the values for each province.

Each section walks the user through a visualized dataset, pointing out key observations along the way. These explanations rely on a combination of annotations, highlighting, animated transitions, and single-frame interactivity.

These narratives crucially allow dense information to be quickly comprehended by the user, and the graphical elements play an important role in making this possible. Importantly, the exposed interactivity is part of the narrative, not merely an afterthought.’

Human Development Trends – Gapminder

‘This interactive slideshow surveys trends in global income and health. The visualization begins with a grid of screenshots from different sections of the presentation, with each image labeled with its respective topic (Income, Poverty, Health, Deaths, etc.). This checklist structure provides an establishing shot of the content to be covered.

Each section walks the user through a visualized dataset, pointing out key observations along the way. These explanations rely on a combination of annotations, highlighting, animated transitions, and single-frame interactivity.

Periodically the presentation allows increased user interactivity with the display, typically after a narrative segment is complete, again following a martini glass structure.’

The Minnesota Employment Explorer – Minnesota Public Radio

‘In July 2008, Minnesota Public Radio (MPR) released a feature on their website on the “Minnesota Slowdown.” Mouse-hover provides details-on-demand; double-clicking an industry triggers a drill-down into that sector, with an animated transition updating the display to show sub-industry trends.

Notably, the visualization also includes social interaction features. A list of comments associated with the current view enables journalists and readers to share observations and discuss trends. Commentary and visualization are linked together. The goal of the visualization was to engage readers in finding and telling their own stories in the data.’

Key Findings

1) Author-driven vs reader-driven visualizations – A purely author-driven approach has a strict linear path through the visualization, relies heavily on messaging, and includes no interactivity. A purely reader-driven approach has no prescribed ordering of images, no messaging, and a high degree of interactivity. A reader-driven approach supports tasks such as data diagnostics, pattern discovery, and hypothesis formation.

2) Interactivity enhances structure and narrative flow – Data stories appear to be most effective when they include interactivity at various checkpoints within the narrative allowing the user to explore the data without veering too far from the story.

The study’s data shows that interactivity is not yet common in flowcharts, comics, or videos, and few visualizations currently use tacit tutorials or stimulating default views.

3) Reader engagement differs from traditional forms of journalism – Data stories differ in important ways from traditional storytelling. Stories in text and film typically present a set of events in a tightly controlled progression. While tours through visualized data similarly can be organized in a linear sequence, they can also be interactive, inviting verification, new questions, and alternative explanations.

The examples researchers analyzed tended to have “hard leads”—brief summaries describing the content of the visualization—whereas journalism often adopts more mysterious leads to promote engagement.

Now that you understand how to balance design, messaging, and interactivity – it’s time to make a chart or infographic of your own.

Crafting quality data visuals can be tricky, but we are here to help. Download our latest eBook for simple data visualization techniques that will make your charts 110% better!