Scrollytelling

Lecture 21

Dr. Benjamin Soltoff

Cornell University
INFO 3312/5312 - Spring 2025

April 15, 2025

Announcements

Announcements

• Homework 05
• Project drafts due May 1st

Communicating interactively with data

1. Interactive charts
2. Scrollytelling
3. Dashboards
4. Interactive web applications

Introduction to scrollytelling

Snow Fall: The Avalanche at Tunnel Creek

• NYTimes article

Scrollytelling

A method to animate content as a reader scrolls through an article

• Coincides with rise in mobile-first design
• Requires explicit (but minimal, non-confusing) interaction by reader
• Reader is in control of the pace of the story

Common design elements

What encompasses scrollytelling?

• Common design patterns
• Need for a shared vocabulary
• Easier, more rapid implementation
• How can scrollytelling be used to tell data-driven stories?

Application exercise

ae-20

Instructions

Articles

1. The East Coast Is Sinking
2. How Artists Get Paid From Streaming
3. Can You Create a Diverse College Class Without Affirmative Action?

Discussion questions

• What kinds of interactivity are used?
• How is data utilized in the article?
• How does interactivity and the data work together to tell the story?

Implementing scrollytelling

Implementing scrollytelling

• HTML - structural layer
• CSS - presentation layer
• JavaScript - behavioral layer

Closeread

Custom format for Quarto that enables scrollytelling features for HTML documents

Utilizes scrollama.js

Incorporates effects:

• Scaling
• Panning
• Zooming
• Highlighting

Components of a Closeread document

Sections

:::{.cr-section}
< add paragraphs, images, code cells, etc. >
:::

Stickies

:::{#cr-myimage}
![](path-to-myimage.png)
:::

Triggers

When this paragraph scrolls into view it will reveal a histogram. @cr-myplot

:::{#cr-myplot}
```{r}
hist(rnorm(15))
```
:::

Examples of Closeread documents

Minard’s map

• Closeread document
• Source code

Which way do you ski?

• Closeread document
• Source code

Wrap-up

Recap

• Scrollytelling provides a method for animating content as a reader scrolls through an article
• Utilize common design patterns to ease implementation of scrollytelling features
• Avoid overwhelming the audience with unnecessary interactivity
• Closeread is a custom format for Quarto that enables scrollytelling features for HTML documents