21. Narrative �Visualization

MSER 521�Fall 2025

1

What makes a visualization into a story (versus just “showing data”)?

​

• Background: why it’s important: plant based eating good for climate.
• Connecting the big thing to the little that you’re going to talk about.
• Color, graphics, layout
• Annotation
• Connection to one’s audience
• E.g., how it impacts you – knowing your audience.
• Summary

2

What is Narrative Visualization?

• Guides viewers through a specific interpretation of data.
• Unlike exploratory visualizations (where users freely explore), narrative visualizations have a directed path and intended message.
• Forms of assistance include:
• Where the data came from and how it was collected
• Conclusions that can be drawn from the data
• What is most notable and important for the narrative

3

Considers both “the what” and “the how”

• Story – What do you want to communicate?�
• Design – How can you organize the flow of the narrative and data to tell the story?�
• Affective Dimensions – What effect to you want to impart on your user? Can visuals help you accomplish this?

4

Techniques to keep in mind

• 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

5

Questions to ask yourself

• 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?
• What design elements / interactions will enhance (not distract from) the story?

6

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 / Conclusion: Ending without clear next steps / message

7

Types of Narrative Visualizations

1. Annotated Chart (already covered in HW 2-3 + Tableau)
2. Scrollytelling
3. Martini Glass
4. Interactive Slideshow (you’ve seen a lot of these already)
5. Drill-Down Story

8

Scrollytelling

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

​

Examples:

• 1 Pixel Wealth: Scroll-based scale revelation, visual metaphor
• The Pudding - Hello Stranger: Scroll-triggered animations, text integration

9

“Martini Glass” Structure

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

​

�Examples:

• Avalanche at Tunnel Creek
• The Fallen of World War II

10

Where does guidance end?

Where does exploration begin?

Where does control return?

Drill-Down Story

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

​

�Examples:

• Postcards from a World on Fire
• Stories of Climate Hope & Possibility

11

Next Week: Analyzing Your Own Data Narrative

• Story Structure: What narrative structure does it use?
• Opening/Hook: How does it grab your attention? What is the initial message?
• Progressive Disclosure: How does information unfold? What do you see first, second, third?
• Annotations: What text, labels, or callouts guide your interpretation?
• Visual Hierarchy: What visual techniques (color, size, position, contrast) emphasize key points?
• Integration: How well do text and visuals work together? Are they connected or separate?
• Effectiveness: What works well? What could be improved?

12

Gallery of Inspiration

13