Closing the scrollytelling gap with Closeread

JAMES GOLDIE
Data Engineer

Slides: https://wombat2024.talks.jamesgoldie.dev

Code: https://github.com/jimjam-slam/talk-wombat2024

What’s scrollytelling?

The following examples may not appear if you are browsing on the web. Open the links to check them out!

New York Times
Snow Fall: The Avalanche at Tunnel Creek

Miami Herald
House of Cards

All scrollytelling has…

Elements that stay on the page and update as text scrolls by

… but it might also have:

Graphic transitions

Animations

Sounds

Maps

Movies

Chart build-ups

(or it might not!)

These examples often take entire teams to build!

Data journalism • Engineering • Design • Reporting • Editing

Why is scrollytelling hard to do well?

Quarto

takes care of a lot of web publishing fundamentals

Raw HTML

Quarto output

But scrollytelling requires even more engineering

Detecting whether things are on screen

Transitioning between elements

Sizing and positioning content (on various phones, tablets and browsers!)

Drawing attention to elements on the page

Playing and synchronising videos

Most of these elements are built bespoke for each story

What else is out there?

Commercial solutions!
But they’re expensive
And not very flexible
And rarely work with the tools data folk use

Enter Closeread

Goal:
If you can write Quarto, you can write Closeread

---
title: My First Closeread
format: closeread-html
---

Hello world! Please read my Closeread story below.

::::{.cr-section}

Closeread enables scrollytelling.

Draw your readers attention with: @cr-features

:::{#cr-features}
1. Highlighting
2. Zooming
3. Panning
:::

::::

Ingredients of a Closeread

Use Quarto cross-references to build a story

Stickies are things that stick on the page.

:::{#cr-example}
I want to show this off!
:::

Triggers scroll past normally and make stickies appear or change.

Look at this... @cr-example

Goal:
Reasonable defaults with powerful options

Focus effects
Zoom, pan and highlight images and text

Layout options
Sidebars and overlays

Respect Quarto themes
(and customise them without CSS)

Integrates with Observable JS
For fully custom web graphics

Closeread Prize

Posit has run contests for Shiny, Great Tables, etc.

They approached us about sponsoring a Closeread Prize late last year

40 entries

Sports • Social policy • Mathematics • Finance • Personal stories • History • Board games • Education • Astrophysics

Prizes

Grand Prize: Screenshot of EURO 2024 Final scrollytelling Analysis

Prizes

Special Prize: Council Housing & Neighbourhood Income Inequality in Vienna

Prizes

Special Prize: Which way do you ski?

Prizes

Special Prize: World Population Flags

Common themes

Less is more
1–2 sentences on screen at a time

You still need a compelling story
But that doesn’t necessarily mean prize-winning research!

Build things up
Introduce one layer/facet/group at a time

Another contest? Yes!

This one is aimed at students!

https://www.causeweb.org/cause/contests/data-scrollytelling

Closes Dec 20

What’s on the horizon

Widget support

Lots of Closeread Prize entries that tried to use htmlwidgets!

Aiming to support htmlwidgets (R), Jupyter widgets (Python), …

Video support

Videos that play and loop when they enter
Think of these like museum exhibits!

Videos that progress as you scroll
Good for technical pieces that require pacing

Thank you!

Try it out at
closeread.dev

me@jamesgoldie.dev
bsky.app/profile/jamesgoldie.dev