Document

Document

A scrollytelling visualization uses the Scrollama library to trigger a sequence of animated transitions in an SVG chart as the reader moves through text steps. The chart begins with all twenty steelblue circles clustered at the center, and each step calls a different callback that animates the circles to random or fixed positions along the x- or y-axis using D3 transitions. The active step is highlighted by increasing its opacity, while inactive steps fade. The code relies on d3.v6 for selections, data joins, and transitions, with Scrollama handling scroll-triggered events.

Aandyreagan

84% match

scrollytest3

This scrolling visualization demonstrates a step-through narrative experience where sections of text are fixed to the left while a graph animates on the right, guided by the user's scroll position. Built with D3 v4 and the d3-dsv module for data parsing, it uses the graph-scroll library to trigger animated transitions between steps as the reader scrolls. The SVG rendering includes smooth, state-driven updates, likely showing a dataset that changes or highlights different aspects with each section. The design focuses on storytelling with data, letting the scroll control the flow of the visualization.

scrollytest6

This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

scrollytest3

This example demonstrates a scrolling narrative visualization built with D3.js, where user scroll progress drives animated transitions in an SVG/WebGL-rendered scene. The chart uses the `graph-scroll` library to bind scroll events to step-wise updates, likely revealing or transitioning between data states as the reader moves through the page. The visualization is generated from a Blockbuilder.org template and is part of a series of scrolling prototypes (scrollytest1/2), indicating iterative exploration of scroll-driven storytelling. Rendered with SVG and WebGL, it combines D3 v4 with jetpack utilities for concise coding. The MIT-licensed example shows how scrolling can act as an interactive narrative mechanism to sequence changes in the visualization.

D3 Scatterplot (Animations)

This D3 scatterplot demonstrates animated transitions between datasets. The visualization initially renders 15 random data points as circles, with x- and y-axes scaled to the data’s domain. When a user clicks the text header, new random data replaces the old, and the circles smoothly transition to their updated positions while the axes rescale accordingly. The code uses d3.svg.axis for the axes and d3.selectAll("circle").transition() to animate the updates, with scales from d3.scale.linear.

BBenHeubl

77% match

scrollytest2

scrollytest2 is a scrollytelling-driven data visualization that uses D3 v4 to animate SVG and WebGL graphics in response to page scrolling. The page embeds the graph-scroll.js library to tie scroll position to visualization state, creating an interactive, narrative flow. It is built with D3's dsv module for data loading and uses the jetpack helper for concise DOM manipulation. The visualization, authored by 35degrees and forked from an earlier scrollytest block, is rendered with a combination of SVG and WebGL to support smooth transitions and animated elements as the user scrolls.

77% match