Stepper (Step Navigation)

Description

A stepper provides discrete forward and back navigation through a sequence of visualization states. Instead of scroll-triggered transitions (scrollytelling) or continuous animation (playback), the user explicitly clicks “Next” and “Previous” buttons — or presses arrow keys — to advance one step at a time. Each step shows a distinct state of the visualization: a new data subset, a changed annotation, a different highlight, or a transformed view.

Steppers are the simplest author-directed navigation pattern. They give the author full control over the sequence of states the reader encounters, while giving the reader full control over pacing — they advance only when ready. This combination makes steppers ideal for educational content, guided analysis walkthroughs, and presentation slides embedded within a web page. The cognitive load is lower than scrollytelling because the user does not need to calibrate their scroll speed to trigger the right transitions; each button click produces exactly one state change.

The numbered step indicator (often shown as dots or a progress bar) provides orientation — the user knows they are on step 3 of 7 and can gauge how much content remains. Some steppers allow direct navigation by clicking on a specific step number, combining linear progression with random access. Keyboard support (left/right arrows) is easy to implement and important for accessibility.

Stepper (Step Navigation) — try it yourself

When to Use

In educational content where each step introduces one concept or insight and the reader needs time to absorb it before moving on.
In guided analysis walkthroughs where an analyst walks a non-technical audience through their findings step by step.
When the visualization has 3-15 discrete meaningful states that build on each other.
On mobile devices where scroll-driven interactions conflict with native page scrolling.
When the content will be presented live (talks, meetings) and the presenter needs click-to-advance control.
As an alternative to scrollytelling when scroll-hijacking would be disruptive to the page experience.

When NOT to Use

When the data changes continuously rather than in discrete steps — playback/scrub is more appropriate.
When the sequence has only 1-2 states — a simple toggle or before/after comparison suffices.
When the user needs to explore the data freely — steppers are inherently linear and constrained.
When the steps do not build on each other — if the order does not matter, tabs or a dropdown might be better.
When there are more than 15-20 steps — the sequence becomes tedious and the user loses track of their position.

How It Works

The visualization is accompanied by navigation controls: “Previous” and “Next” buttons, and optionally numbered step indicators (dots, numbers, or a progress bar).
Each step corresponds to a predefined visualization state: a specific data filter, annotation set, highlight pattern, or chart configuration.
Clicking “Next” triggers a transition from the current state to the next state. An animated transition shows what changed.
Clicking “Previous” reverses the transition, returning to the prior state.
The step indicator updates to show the current position in the sequence.
Optionally, explanatory text updates alongside the visualization, describing what the current step shows and why it matters.
Keyboard arrow keys can also drive the navigation for accessibility and presentation mode.

Variations

Button stepper: Simple “Previous / Next” buttons below or beside the chart. The most basic form.
Dot stepper: A row of dots (like a slideshow indicator) where each dot represents a step and the current dot is highlighted. Clicking a dot jumps to that step.
Numbered stepper: Steps are labeled (1, 2, 3, …) with titles, allowing the user to understand the overall structure before navigating.
Progress bar stepper: A horizontal bar fills as the user advances, giving a continuous sense of progress.
Keyboard-driven stepper: Arrow keys drive the steps, with no visible buttons. Used in presentation mode.
Branching stepper: At certain steps, the user can choose between two paths (e.g., “See by region” or “See by time”), creating a non-linear narrative.
Auto-advance stepper: Steps advance automatically on a timer, like a slideshow, but the user can pause and take manual control.

Code Reference

// Stepper with forward/back navigation and step indicators
const steps = [
  { filter: null, annotation: "Overview of all data" },
  { filter: d => d.region === "Asia", annotation: "Focus: Asia" },
  { filter: d => d.region === "Europe", annotation: "Focus: Europe" },
  { filter: d => d.year >= 2020, annotation: "Recent data (2020+)" },
];
let currentStep = 0;

function goToStep(i) {
  currentStep = Math.max(0, Math.min(i, steps.length - 1));
  const step = steps[currentStep];
  const filtered = step.filter ? data.filter(step.filter) : data;
  updateChart(filtered);
  d3.select("#annotation").text(step.annotation);
  d3.selectAll(".step-dot")
    .classed("active", (_, j) => j === currentStep);
  d3.select("#prev-btn").attr("disabled", currentStep === 0 ? true : null);
  d3.select("#next-btn")
    .attr("disabled", currentStep === steps.length - 1 ? true : null);
}

d3.select("#next-btn").on("click", () => goToStep(currentStep + 1));
d3.select("#prev-btn").on("click", () => goToStep(currentStep - 1));
d3.select("body").on("keydown", (event) => {
  if (event.key === "ArrowRight") goToStep(currentStep + 1);
  if (event.key === "ArrowLeft") goToStep(currentStep - 1);
});