Odyssey.js Scroll

An Odyssey.js scroll-driven narrative links a CartoDB basemap to story slides as the user scrolls. The page uses O.Story and O.Edge triggers to attach map and content elements when a slide enters view, with O.MiniProgressBar providing visual feedback. Data layers load via cartodb.js from a vizjson URL, applying optional SQL filters, while map and title update dynamically.

Aandrewxhill

90% match

Loading thumbnail…

Odyssey.js Slides

An interactive slide deck uses Odyssey.js to present a sequence of map-based story slides, with a CartoDB basemap and optional CartoDB layers loaded from a `vizjson` URL. The story advances through sequential triggers, responding to keyboard arrow keys and on-screen next/prev buttons, while a dot progress indicator tracks the current slide. The code also adapts slide layout to window resizing and adjusts the basemap’s tile URL when the global `baseurl` changes, relying on Leaflet and CartoDB’s JavaScript library for map rendering.

Aandrewxhill

84% match

Loading thumbnail…

Odyssey.js Slides

An interactive slide deck uses Odyssey.js to present a sequence of map-based story slides, with a CartoDB basemap and optional CartoDB layers loaded from a `vizjson` URL. The story advances through sequential triggers, responding to keyboard arrow keys and on-screen next/prev buttons, while a dot progress indicator tracks the current slide. The code also adapts slide layout to window resizing and adjusts the basemap’s tile URL when the global `baseurl` changes, relying on Leaflet and CartoDB’s JavaScript library for map rendering.

Aandrewxhill

84% match

Loading thumbnail…

Odyssey.js Slides

An interactive slide deck uses Odyssey.js to present a sequence of map-based story slides, with a CartoDB basemap and optional CartoDB layers loaded from a `vizjson` URL. The story advances through sequential triggers, responding to keyboard arrow keys and on-screen next/prev buttons, while a dot progress indicator tracks the current slide. The code also adapts slide layout to window resizing and adjusts the basemap’s tile URL when the global `baseurl` changes, relying on Leaflet and CartoDB’s JavaScript library for map rendering.

Aandrewxhill

84% match

Loading thumbnail…

Odyssey.js Torque

An interactive story map combines narrative slides with a live Torque animation layer, showing how data changes over time on a geographic map. The example uses Odyssey.js to coordinate slide transitions with map state, while CartoDB’s Torque renders time-series data as animated points. The code also leverages Google Maps API for base mapping and custom JavaScript to display time-stamped tooltips and a slider that reflects the current temporal step.

Aandrewxhill

78% match

Loading thumbnail…

Odyssey.js Torque

An interactive story map combines narrative slides with a live Torque animation layer, showing how data changes over time on a geographic map. The example uses Odyssey.js to coordinate slide transitions with map state, while CartoDB’s Torque renders time-series data as animated points. The code also leverages Google Maps API for base mapping and custom JavaScript to display time-stamped tooltips and a slider that reflects the current temporal step.

Aandrewxhill

78% match

Loading thumbnail…

Odyssey.js Slides

This example presents a map-based story told through a sequence of slides, focusing on pipeline leak incidents in Nigeria and the Williams Transco leak history. Using the Odyssey.js library, the visualization alternates between map views and informational slides, with navigation controlled by keyboard arrow keys or on-screen buttons. The map is rendered with CartoDB’s base-light tile layer, and the story integration uses Odyssey.js’s `O.Template`, `O.Story`, and `O.Actions.Slides` APIs to manage the slide transitions. A dot progress indicator shows the user’s position within the narrative.

SSaminu

76% 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

69% match