Case Study 2: The New York Times Scrollytelling Tradition

Case Study 2: The New York Times Scrollytelling Tradition

Sometime around 2012, The New York Times graphics department began producing a new kind of digital story: long web pages where charts and text unfolded as the reader scrolled. The format became known as "scrollytelling," and over the next decade it redefined what a data story could be. This case study examines the form, its best exemplars, and what makes it work.

The Situation

By the early 2010s, the New York Times had established itself as the most ambitious data journalism outlet in the English-speaking world (see the Chapter 7 case study on the NYT's action title discipline). The graphics team was producing elaborate interactive visualizations, multi-panel investigations, and live election-night dashboards. But a new form was beginning to emerge that combined the narrative structure of long-form journalism with the visual grammar of data visualization: scrollytelling.

The name is awkward, but the format is specific. A scrollytelling story is a long web page — longer than a typical article, often as long as a magazine feature — in which the reader scrolls downward through the story. As they scroll, the visualizations on the page change: charts update, maps pan, data points highlight, annotations appear, previously grayed-out elements become colored, zoom levels change, perspectives shift. The reader controls the pace by scrolling, but the narrative controls the sequence. The reader cannot skip ahead to a random part of the story because the visualizations are linked to specific scroll positions. They experience the story more or less in the order the designers intended.

The NYT's 2012 piece "Snow Fall: The Avalanche at Tunnel Creek" is often cited as the first major example of the form, though the piece was primarily a narrative text story with embedded multimedia rather than a data story. Over the next several years, the NYT graphics team — along with peers at The Washington Post, The Guardian, Reuters Graphics, and smaller outlets like The Pudding — refined the form and applied it specifically to data journalism. By the late 2010s, scrollytelling had become a standard format for complex data stories that could not be told in a single chart or a traditional article layout.

The 2018 piece "Extensive Data Shows Punishing Reach of Racism for Black Boys" (by Emily Badger, Claire Cain Miller, Adam Pearce, and Kevin Quealy) is one of the most cited scrollytelling data stories. It walked readers through research by Raj Chetty and colleagues on racial income mobility in the United States, using scrolling to reveal the findings one step at a time. The 2020 piece "How the Virus Got Out" (by Jin Wu, Weiyi Cai, Derek Watkins, and James Glanz) used scrollytelling to trace the early global spread of COVID-19 through a series of connected maps and charts. The 2017 piece "What's Really Warming the World?" (by Eric Roston and Blacki Migliozzi, published at Bloomberg but in the same tradition) walked readers through climate attribution research by showing one contributing factor at a time.

This case study examines the scrollytelling tradition as a mature example of data storytelling at the intersection of narrative structure, visual emphasis, progressive disclosure, and audience design. Every principle from Chapter 9 is visible in a well-executed scrollytelling piece, and the form makes the principles easier to see because each design decision is tied to a specific scroll position.

The Data

Different scrollytelling pieces use different data, but they share certain characteristics. The data tends to be:

Rich enough to sustain a multi-chart story. A story that can be told in one chart does not need scrollytelling. The form adds value when the story has multiple dimensions — different time periods, different subgroups, different comparisons — that benefit from being revealed sequentially.

Specific enough to carry narrative weight. Generic "Americans think X" data is less engaging than specific "900 Black boys from this zip code had these outcomes" data. Scrollytelling stories tend to work best when the data has concrete, named, specific examples that anchor the abstract statistics.

Time-ordered or causally ordered. Stories that have a natural sequence — time moving forward, a virus spreading, a generation growing up — fit scrollytelling naturally because the scrolling itself implies movement through a sequence. Stories without a natural order can still be told as scrollytelling but require more design work to create the sequence.

Inconclusive or multi-faceted. A story with one obvious conclusion is better told as a single chart with an action title. Scrollytelling shines when the story has multiple findings, multiple qualifications, multiple possible framings — when the reader needs to be walked through a sequence of partial conclusions before the full picture emerges.

For the 2018 racial mobility piece, the underlying data was Chetty et al.'s research on intergenerational income mobility using IRS tax records linked to Census data. The dataset contained millions of parent-child pairs across the United States, with measures of parental income, child income, neighborhood characteristics, and race. The main finding — that Black boys born to parents in any given income quintile had worse outcomes than white boys from the same starting position — was a multi-dimensional result that required progressive revelation to fully convey.

The Visualization

A well-constructed scrollytelling piece is a long web page with three main visual elements:

1. A persistent visualization area. Usually at the top or center of the screen, this is where the charts live. The visualization changes as the reader scrolls — one chart becomes another, or the same chart updates with new data emphasized. The visualization stays visible throughout the scroll (it is "sticky") while the text below it scrolls past.

2. A scrolling text layer. The narrative text flows down the page as the reader scrolls. Each paragraph or text block is tied to a specific visualization state. When the reader scrolls past the next paragraph's trigger point, the visualization updates to match. The text and the visualization are synchronized.

3. Optional supplementary elements. Photos, pull quotes, inline small charts, and interactive elements can appear alongside the main visualization to add context or texture. These are used sparingly in the best scrollytelling pieces.

The synchronization between text and visualization is the defining feature. As the reader scrolls through the story, they see:

Paragraph 1 + Chart A (context)
Paragraph 2 + Chart A with highlighted region
Paragraph 3 + Chart A with annotation
Paragraph 4 + Chart B (transition)
Paragraph 5 + Chart B with highlighted region
... and so on.

Each scroll step reveals both a new piece of text and a corresponding visual update. The text explains what the reader is about to see; the visual provides the evidence. The reader experiences the narrative as an integrated whole, not as a series of separate paragraphs and separate charts.

The 2018 racial mobility piece implemented this pattern with particular discipline. The central visualization was a scatter plot-like chart where each dot represented a person's income at adulthood given their parents' income. As the reader scrolled:

First, the reader saw only white boys — an upward-sloping cloud showing the expected pattern (children from higher-income parents tend to have higher incomes themselves). The text explained the baseline relationship.
Next, Black boys were overlaid on the same chart. The reader could immediately see that the Black cloud sat lower on the y-axis at every parental income level. The text explained the finding.
Then, Black girls were added with a different color, showing that the gender-specific finding was not a general race finding — Black girls did roughly as well as white girls from the same starting point. The text explained that this was a boys-specific pattern, not a general racial pattern.
The chart then decomposed into different neighborhood types, showing that the Black-boy disadvantage persisted even in neighborhoods with low poverty and high rates of two-parent families. The text explained that the usual explanations (poverty, family structure) did not account for the pattern.
Finally, the chart showed what kinds of neighborhoods did close the gap — those with high proportions of Black fathers present — with the text exploring implications for policy.

Each scroll step was a narrative move. Each chart state was a piece of evidence. The reader experienced the story as a sequence of revelations rather than as a static presentation of all the data at once.

The Impact

The NYT's scrollytelling pieces have been among the most-read and most-cited data journalism of the past decade. The 2018 racial mobility piece was widely discussed in academic, policy, and journalism circles. The 2020 pandemic pieces were read by millions. The form has been adopted by every major data journalism outlet — Washington Post, Guardian, Reuters, ProPublica, Quanta, Bloomberg, and many smaller publications. Scrollytelling is now a standard format for major data-driven investigations, and the NYT's versions remain the canonical references.

The impact has extended in several directions:

Impact on the form itself. Scrollytelling was not invented by the NYT — early experiments appeared in various places in the early 2010s — but the NYT's sustained production of high-quality examples refined the form and established its conventions. Subsequent scrollytelling pieces by other outlets borrowed directly from the NYT's techniques: sticky visualizations, trigger-based updates, the use of the grayed-out strategy across scroll steps, the integration of text and visualization, the final resolution that ties the pieces together.

Impact on reader expectations. Readers who encountered well-executed scrollytelling came to expect it for complex data stories. A story about a multi-step finding that was presented as a traditional article with static charts began to feel like a missed opportunity. The form raised the bar for ambitious data journalism.

Impact on the tooling. Libraries like scrollama.js emerged to make scrollytelling easier to implement. The NYT itself developed internal tools for producing scrollytelling pieces, and some of these tools have been open-sourced or shared. Other outlets built similar tools. The technical infrastructure for producing scrollytelling is now widely available, though the editorial and design skills still require practice.

Impact on educational institutions. Journalism schools began to teach scrollytelling as a distinct skill. The form is now part of the curriculum at Columbia, Medill, the Knight Center at CUNY, and other major programs. A generation of data journalists is trained in the techniques the NYT refined.

Impact on the understanding of specific stories. The 2018 racial mobility piece, in particular, seems to have changed how many readers understood the Chetty findings. The academic paper alone was read by a small number of researchers. The scrollytelling piece was read by millions, and the specific finding — Black boys' disadvantage is gender-specific and persistent across neighborhood types — became part of the general public discourse about racial inequality in ways that the raw academic paper had not achieved.

Why It Works: A Theoretical Analysis

Scrollytelling succeeds as a form because it aligns with every principle in this chapter.

1. It enforces a linear reading order. The reader cannot skip to a random part of a scrollytelling story without destroying the narrative. They experience the charts in the order the designers intended, which means the three-act structure is preserved: context first, evidence in the middle, implications at the end. The format solves the problem that print multi-chart figures have — that the reader can look at the charts in any order — by constraining the reading path.

2. It implements progressive disclosure natively. Each scroll step adds a new piece of information. The reader sees one layer at a time, absorbing it before moving to the next. This is Shneiderman's mantra (overview first, zoom and filter, details on demand) built into the structure of the format. A reader who reads only the first few scroll steps still gets a meaningful overview; a reader who reads the full piece gets the full detail.

3. It supports fine-grained visual emphasis. Because the visualization updates with each scroll step, the designer can use visual emphasis more aggressively than in a static chart. One step highlights one subset; the next step highlights a different subset. The grayed-out strategy from Section 9.5 becomes a moving strategy: as the reader scrolls, different elements become emphasized while others fade. The full context is preserved, but the reader's attention is directed precisely at each moment.

4. It integrates text and visualization tightly. In a traditional article with embedded charts, the reader has to mentally bridge the text and the chart: read a paragraph, look at a chart, connect them, continue reading. Scrollytelling removes the bridge by synchronizing the two. The paragraph the reader is currently reading is directly linked to the visualization they are currently seeing. The integration is cognitively cheaper than the traditional reading process.

5. It allows explicit audience pacing. The reader controls the speed by scrolling at their own pace. Someone who wants to linger on a chart can stop scrolling and study it. Someone who wants to skim can scroll quickly and get the overview. The format accommodates different engagement levels without forcing any particular pace, unlike a video (which has a fixed pace) or a traditional article (which has no visual sequencing).

6. It rewards narrative craft. A good scrollytelling piece is structured like a story: setup, complication, resolution. The sticky visualization area is the stage; the scrolling text is the narration; the visual updates are the scene changes. Designers who understand narrative structure — who know how to build tension, when to deliver the payoff, how to close with a resolution — produce better scrollytelling pieces than those who treat the format as just a "long article with charts."

7. It matches the web's grammar. The web is a scrolling medium. Readers scroll constantly, on every web page, without thinking about it. Scrollytelling exploits this already-learned behavior rather than asking readers to learn a new interaction. A reader encountering their first scrollytelling piece can navigate it immediately, because scrolling is the one interaction everyone already knows. This is why scrollytelling is native to the web in a way that other interactive formats are not.

Complications and Counter-Arguments

Scrollytelling is effective when executed well, but it is not without critics.

It is expensive to produce. A major scrollytelling piece from the NYT or Washington Post can take weeks or months of production time, involving reporters, editors, designers, developers, and data analysts. The resource cost is high, which means scrollytelling is available only to well-resourced outlets. Smaller newsrooms cannot sustain the form for routine coverage.

It does not work for all stories. Stories that do not have a natural sequence — a comparison across independent groups, a snapshot of a state — do not benefit from the scrollytelling format. Forcing such stories into scrollytelling adds friction without adding value. The form is best used when the story has a genuine narrative structure.

It is hard to accessibility-test. Scroll-triggered visualizations can be difficult for readers using screen readers, keyboard navigation, or high-contrast modes. Well-designed scrollytelling pieces include accessible alternatives — fallback static versions, ARIA labels, keyboard-navigable triggers — but many do not, and the form has historically been worse for accessibility than traditional web content. This is improving, but slowly.

It fragments on mobile. Scrollytelling was designed for desktop screens where the "sticky visualization" area is visually prominent. On mobile, the same piece may be harder to read because the visualization and text compete for the same limited screen space. The best mobile versions use different layouts — sometimes a simplified linear flow, sometimes a horizontal scroll pattern — but the translation from desktop to mobile adds design work.

The form can hide weaker reporting. A visually impressive scrollytelling piece can feel substantive even when the underlying reporting is thin. The format rewards visual polish, and visual polish can mask analytical weakness. A reader dazzled by the scroll animation may not notice that the specific claims are not well supported. This is a risk of any visually impressive format, and it is worth guarding against: the visual should serve the reporting, not substitute for it.

It is not timeless. A scrollytelling piece that relies on specific web technologies may not render correctly in ten years. Libraries become deprecated, browser features change, custom interactions break. The NYT has done admirable work maintaining its older pieces, but many scrollytelling pieces from other outlets have already become unusable because their underlying code has broken. The form has a shorter lifespan than a traditional article with static images.

Lessons for Modern Practice

Most practitioners will not produce a New York Times scrollytelling piece. But the principles that make scrollytelling work apply to any multi-chart story.

Sequence is structure. The core insight of scrollytelling — that revealing charts one at a time, in a specific order, is a powerful narrative technique — can be applied to slide decks, reports, and articles. You do not need scroll-triggered web technology to benefit from the principle. A slide deck that reveals one chart at a time, in a specific order, is a simpler version of the same idea.

Sticky visualization is a powerful layout. The idea that the visualization stays visible while the text scrolls past is a strong design pattern. In a print document, you can approximate it by placing a chart at the top of a page and letting the text flow below, or by using a sidebar layout where the chart is fixed and the text runs beside it. The key insight is that the reader should not have to flip back and forth between the text and the chart.

Each scroll step is a narrative move. Design each scroll step (or each slide, or each chart in a sequence) to advance the narrative. Do not add steps that do not move the story forward. Do not have two steps that say the same thing. The discipline of "one scroll step = one narrative move" forces you to make every step count.

Use the grayed-out strategy across the sequence. Each scroll step can emphasize a different element while the others fade. This is easier to do in scrollytelling (the visualization updates per step) than in print, but you can still do it in print by using successive charts that highlight different subsets. The same data, different emphases, different revealed layers.

Start with the story, not the format. The format of scrollytelling is powerful, but it is a vehicle, not a destination. Choose the format after you have decided what story you are telling. If the story genuinely has a multi-step sequence with a natural order, scrollytelling is a good fit. If the story is a simple comparison or a single finding, a static chart is better.

Test with real readers. A scrollytelling piece (or any complex data story) should be tested with readers who have not been involved in its creation. Watch them read it. Watch where they slow down, where they scroll quickly, where they stop. Use the observations to refine the pacing and the sequence. The same principle applies to slide decks and reports: show your draft to someone who has not seen it before and watch their reactions.

Preserve the story in a non-interactive form. For a scrollytelling piece, make sure a reader who cannot or will not interact with the scroll can still get the story. For a slide deck, make sure a reader with only the printed version can understand it. The interactive or scroll-triggered layer is an enhancement, not the whole story.

Discussion Questions

On the resource cost. Scrollytelling pieces from major outlets can take weeks to produce. Is this cost justified, or could the same stories be told in simpler formats that reach similar audiences with less investment?
On the accessibility gap. Many scrollytelling pieces have historically been difficult for readers using screen readers or keyboard navigation. How should the industry balance visual ambition with accessibility? What does an accessible scrollytelling piece look like?
On narrative vs. data. A scrollytelling piece is part narrative and part data. If the narrative is strong but the data is weak, the piece can still feel substantive. How do you evaluate the balance, and how do you guard against letting visual polish substitute for analytical rigor?
On the print analog. Scrollytelling is native to the web, but the principles (sequenced reveal, sticky visualization, narrative integration with charts) can be adapted to print. How would you translate a scrollytelling piece into a print report? What would you lose, and what would you keep?
On the lifespan of interactive content. Scrollytelling pieces depend on specific web technologies that may not survive decades of browser and library changes. Does this shorter lifespan matter, and how should it affect the choice of format for important stories that are meant to have lasting relevance?
On the skill transfer. Scrollytelling combines narrative journalism, data analysis, visual design, and web development. Few practitioners have all four skills. Should the field aim to train "scrollytelling generalists" or continue to rely on multi-disciplinary teams?

The New York Times scrollytelling tradition is one of the most visible examples of data storytelling at the highest level. It combines every principle from this chapter — audience analysis, Big Idea, three-act structure, progressive disclosure, visual emphasis, storyboarding, and ethical discipline — in a form that is native to the web. The form is expensive and not always the right choice, but when it is right, it produces data stories that change how readers understand complex topics. The principles that make scrollytelling work are available to every practitioner, even those who will never produce a scrollytelling piece. Sequence as structure, sticky visualization, per-step emphasis, narrative integration — these ideas will improve your slide decks, your reports, and your static charts, even when you never touch the scrollytelling format itself.