MSER 521 Course Website

Key Concepts

What is Narrative Visualization?

Narrative visualization combines data visualization with storytelling techniques to guide viewers through a specific interpretation of data. Unlike exploratory visualizations (where users freely explore), narrative visualizations have a directed path and intended message.

Core Principles

Story Structure: Every data story needs a beginning (hook), middle (exploration), and end (insight/call to action)
Progressive Disclosure: Reveal information gradually to build understanding
Annotation: Use text, highlights, and callouts to guide attention
Visual Hierarchy: Control what viewers see first, second, third
Scaffolding: Provide context and background before showing complex data

Storytelling Structures for Data

1. Martini Glass Structure

Opening: Single, focused message (the stem)
Body: Interactive exploration (the glass)
Conclusion: Return to the main message

2. Interactive Slideshow

Linear progression through key points
Each "slide" reveals one insight
User controls pace (next/previous buttons)

3. Drill-Down Story

Start with overview
Allow users to explore details
Return to main narrative

4. Annotated Chart

Single visualization with rich annotations
Text guides interpretation
Highlights key data points

5. Scrollytelling

Story unfolds as user scrolls
Visualizations animate or change on scroll
Text and visuals are tightly integrated

Techniques for Guiding Viewers

Annotations

Callouts: Highlight specific data points
Labels: Explain what viewers are seeing
Captions: Provide context and interpretation
Arrows/Lines: Direct attention to important elements

Visual Highlighting

Color: Use color to emphasize key data
Size: Make important elements larger
Position: Place key information in prominent locations
Contrast: Use contrast to separate important from background

Text Integration

Headlines: Set expectations
Subheadings: Break up content into digestible sections
Body Text: Provide context and interpretation
Call-to-Action: Guide next steps

Interaction Design

Progressive Disclosure: Show information in stages
Hover States: Reveal details on demand
Filters: Allow exploration while maintaining narrative
Transitions: Smooth animations guide attention

Examples of Effective Narrative Visualizations

Example	Structure	Key Technique
The Fallen of World War II	Martini Glass	Progressive disclosure, annotation
The Pudding - Hello Stranger	Scrollytelling	Scroll-triggered animations, text integration
1 Pixel Wealth	Scrollytelling	Scroll-based scale revelation, visual metaphor
Gapminder	Exploratory / Undirected	Overview → exploration → conclusion
Reuters - How the novel coronavirus has evolved	Annotated Timeline	Rich annotations, visual hierarchy
Postcards from a World on Fire	Drill-down Story	Opening message + browse
Stories of Climate Hope & Possibility	Drill-down Story	Opening message + browse

Common Pitfalls to Avoid

Overwhelming with Data: Too much information at once
Lack of Focus: No clear message or takeaway
Poor Text Integration: Charts and text feel disconnected
Missing Context: Assuming viewers understand background
Weak Opening: Failing to hook viewers immediately
No Call to Action: Ending without clear next steps
For Climate-Related Stuff: Feelings of hopelessness, powerlessness

Questions to Ask When Designing

What is the one key message I want viewers to remember?
Who is my audience and what do they already know?
What is the best structure for this story? (Martini glass, slideshow, etc.)
What annotations are needed to guide interpretation?
How can I use visual hierarchy to emphasize the main point?
What interactions will enhance (not distract from) the story?

Visualization: Narrative Visualization & Storytelling