Fork of Sample_Leaflet_scrollytelling2

Sample_Leaflet_scrollytelling

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.

88% match

Fork of Sample_Leaflet_columnsFly

This example demonstrates a linked interaction between an HTML list and an interactive Leaflet map. Hovering over list items triggers the map to fly between two distinct geographic locations using the `map.flyTo` method. The visualization pairs a simple, unstyled list with a CartoDB Voyager tile layer rendered via the Leaflet JavaScript library. The code shows how DOM events, such as `mouseover`, can directly control map animations, offering a lightweight pattern for coordinating non-spatial UI elements with geospatial views. The map is initialized with a center point and zoom level, and the interaction resets colors after a short delay.

80% match

Sample_Leaflet_columns

This example pairs an interactive Leaflet map with an HTML list to demonstrate coordinated highlighting. The left column contains list items, while the right column shows a CartoDB basemap centered on Syria. Hovering over a list item triggers the map to fly to a corresponding geographic location, such as zooming to a specific point near Crete. The code uses Leaflet’s `flyTo` method and the map’s tile layer from CartoDB’s Voyager style, with mouse events on the list elements controlling the map’s view.

74% match

Sample_Leaflet_starter

This example displays a map centered on a region in Syria, with an overlay of a list of three text items. It shows a map visualization using the Leaflet JavaScript library, with CartoDB’s Voyager tile layer providing the basemap. The page layout is constructed with HTML and CSS flexbox, placing the map and the list side by side. The code initializes the map with a specific latitude and longitude, sets the zoom level, and adds the tile layer. No interactive features are demonstrated beyond the static map display, and the list items are placeholders without associated map interactions.

72% match

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.

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.

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.