Command Palette

Search for a command to run...

Hectal
Phase 17Advanced18 of 19 in Data Visualization

Storytelling and Scrollytelling

From a dashboard that answers many questions to a page that makes one point: the finding first, annotations as the narrator, and a scroll-driven story built with position: sticky and IntersectionObserver.

A dashboard lets you ask many questions. A story makes one point, to a reader who did not ask. This phase is about the second job: choosing the finding, putting it first, and using annotations and order to lead the reader to it without bending the truth.

Then you build the scroll-driven page the best data journalists use. A chart stays fixed on screen while text steps scroll past it, and each step changes the chart. You do it with two browser features, position: sticky and IntersectionObserver, and no library. You also make it work for people on phones, for people who ask their system for less motion, and for people who read with a screen reader.

At the end you build "Ardenvale's year on two wheels": a separate page, made from the same Lumen Bikes data, about the seasons, the 14 August app outage and the rise of e-bikes. It lives next to the dashboard in your project.

Phase 17 · the story

Lina, communications

“The city wants a page for its website that tells people what happened on our bikes this year, and nobody will read a dashboard.”

The city council has asked Lumen Bikes for a short feature on the city's website: Ardenvale's year on two wheels. Lina, who runs communications, has seen the team's dashboard. It is good, and it is not what she needs. A visitor from the city website does not know what a 7-day average is and will not click a dropdown to find out.

She has three things she wants to say. Summer days carry two and a half times the rides of winter days. The app went down on 14 August and the whole city noticed. And e-bikes went from about one ride in four to nearly two in five. She wants a person to scroll once and come away knowing all three.

In this phase you learn how a story differs from a dashboard, how to guide a reader with annotations, and how to build a page where the chart stays put and the story scrolls past it. At the end the page is real, and it is made from the same data as everything else.

In this phase

You will learn

  • Tell a story with one chart: pick the finding, put it first, and say how sure you are
  • Annotate a chart so the reader's eye goes where the story goes, and frame it honestly
  • Build a scroll-driven page with position: sticky and IntersectionObserver, without a library
  • Make the same story work on a phone, with reduced motion, without scrolling, and with a screen reader

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

  • story.html
  • src/story/main.js
  • src/story/steps.js
  • vite.config.js
0/6 · 0%
6 topics ~3 h 16 code blocks & diagrams
Start with the first topic
1
17.1

Exploring vs Explaining

A dashboard is for exploring: many questions, asked by someone who wants to ask them. A story is for explaining: one point, told to someone who did not ask. The finding comes first, and the audience decides how much you must say.

24 min 2 code practice

2
17.2

Annotation and Narrative Structure

Annotations are the narrator of a chart: a few words, placed beside the mark they talk about, that tell the eye where to look. The order of the steps (setting up, building, the reveal) decides whether the reader follows, and honest framing decides whether they should.

27 min 2 code practice

3
17.3

Scrollytelling with position: sticky and IntersectionObserver

Scrollytelling keeps one chart fixed on screen while text steps scroll past it, and each step changes the chart. Two browser features do the whole job: position: sticky holds the chart, and IntersectionObserver tells you which step is in the middle of the screen.

28 min 4 code practice

4
17.4

Step-Driven Charts

One chart, many states: each step of the story is a named state, and the chart is a function of the active step. That is why scrolling back up, jumping with a link, resizing and opening the page half-way down all work without special cases.

30 min 3 code practice

5
17.5

Stories on Phones and for Everyone

Most readers of a public story arrive on a phone, and some cannot or will not watch it move. Reduced motion, a layout that fits 320 px, a version that needs no scrolling trick, and text that carries every number for a screen reader are part of the story, not extras.

43 min 3 code practice

6
17.6

Build: Ardenvale's Year on Two Wheels

Add a second page to the project: a scrolling story built from the same Lumen data, with the seasons, the August outage and the rise of e-bikes, a list version, reduced motion, and the numbers in the text.

37 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A headline that can say nothing

finding(a, b) takes two lists of daily rides and should return a headline such as 2.5 times. With an empty list or a base of zero it returns NaN times or Infinity times.

Beginner
2

Flip the label near the edge

labelSide(pointX, textWidth, chartWidth) decides whether a label goes to the right or the left of its point. It always says "right", so labels near the right edge run off the chart.

Intermediate
3

Which step is in the middle?

closestStep(centres, mid) gets the vertical centre of each step and the middle of the screen, and returns the index of the nearest step. It returns the first step's index whatever the numbers.

Intermediate
4

Make the chart stay

The chart on the right should stay at the top while the text on the left scrolls, but it scrolls away with the text.

Intermediate
5

Light up the active step

Each step of this story is taller than the scroller. The observer uses threshold: 0.5, so no step ever gets the class is-active.

Advanced
6

Say every number in words

A screen reader only hears the text. missingNumbers(labels, text) should return the numbers that appear in the chart's labels but not in the step's text, so the page can fail a check.

Advanced