Skip to main content
100%

Sample_Leaflet_scrollytelling

✓ Published1🌍 Public
FFrancesco Di Filippo
Last edited Mar 9, 2024
Created on Mar 9, 2024

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
73% match