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.