Scrolling Sections

100%

Scrolling Sections

✓ Published0🌍 Public

Last edited Jul 14, 2017

Created on Jul 14, 2017

A narrated data-driven story scrolls through a talk transcript, using D3 v4's `scroller` pattern to bind text sections to a fixed visualization. The display animates filler-word counts and speech patterns from a TSV dataset, highlighting "um," "ah," and "uh" in sequence. As the user scrolls, `d3.select(window).on('scroll.scroller')` updates SVG elements, tracing the speaker's stumbles over time.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/ae06d780bc89a76f4c6db6fb9ca6fe49'>JVScrollexample1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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.

335degrees

84% match

Loading thumbnail…

Scrolling Sections

This interactive scrollytelling visualization walks through a speaker’s analysis of filler words in his own conference talk. As the user scrolls through narrative sections, an SVG line chart updates to reveal the frequency and timing of filler words (um, uh, ah) over the talk’s 30-minute duration. The visualization highlights key moments—such as spikes in fillers and a cough at the midpoint—by dynamically updating text and chart annotations in sync with scroll position, using d3.v4 and animated SVG transitions.

335degrees

83% match

Loading thumbnail…

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.

335degrees

80% match

Loading thumbnail…

Scrolling Sections

Scrolling Sections links a set of text annotations to a fixed visualization panel using a custom scroller built on D3's event dispatcher and `d3.bisect`. As the user scrolls, the scroller calculates the current section index and emits `active` and `progress` events, which the visualization uses to update its display. The page layers scrolling text over a fixed SVG area via CSS `position: fixed`, with each section providing narrative context for the animated visualization.

CCaroline Ghisolfi

80% match

Loading thumbnail…

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.

335degrees

78% match

Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl

77% match

Loading thumbnail…

scrollytest5

This scrolling visualization demonstrates a scrollytelling narrative with an interactive SVG/WebGL canvas. It uses D3's dsv module to load and parse data, with sections of the page triggering graphical transitions as the user scrolls. The rendering combines SVG for crisp text and UI elements with WebGL for high-performance drawing of data points, while d3.graph-scroll.js coordinates the scroll events to update the visualization. The animation and scroll-driven interactivity are central to the piece, guiding the viewer through a structured, sequential exploration of the data. The example is built with Blockbuilder.org and is part of a series of experimental scroll-driven visualizations.This is a data visualization example titled **scrollytest5**, created by 35degrees. It is a scroll-driven (scrollytelling) visualization built with D3, using a combination of SVG and WebGL for rendering, with animation. It is part of a series of blocks exploring scroll-based interactions. The visualization uses D3 v4 and the d3-dsv module for data loading, and includes a custom graph-scroll helper for scroll-triggered animations. It is licensed under MIT. --- **Scrollytest5** is an interactive scrollytelling visualization from the D3 block gallery. It uses a scroll-driven narrative to guide viewers through a data story, with visual elements rendered in both SVG and WebGL and animated in response to scroll position. The project builds upon a series of earlier "scrollytest" experiments, iterating on scroll-based storytelling techniques. It leverages the D3.js library, specifically d3-dsv for data parsing, and includes a helper library (graph-scroll.js) to manage the scroll-triggered state changes. The example demonstrates how to create a seamless, engaging, scroll-driven data narrative within the D3.js ecosystem.Here is a concise description for the visualization gallery: This block, titled **scrollytest5**, is an interactive data-driven scrolling visualization. It uses the D3.js framework with SVG and WebGL rendering to create a scroll-driven narrative experience. The visualization leverages a graph-scroll library to animate and transition between different states or scenes as the user scrolls, building upon a series of earlier scrollytest iterations. Built with Blockbuilder.org, it is a part of the author's exploration of scroll-based storytelling with D3. The project is licensed under MIT.

335degrees

77% match

Loading thumbnail…

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.

335degrees

76% match