Skip to main content
100%

Odyssey.js Scroll

✓ Published0🌍 Public
Aandrewxhill
Last edited Jul 7, 2014
Created on Jul 7, 2014

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.

AI-generated description

Similar vizzes

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
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
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
90% match
Loading thumbnail…

Odyssey.js Scroll

An Odyssey.js scroll-driven narrative presents a map story about the voyage of the HMS Beagle, with content sourced from Wikipedia. The page shows a Leaflet map with a CartoDB base-light tile layer that centers and zooms as the user scrolls through text slides. Odyssey.js manages scroll triggers and state transitions, while jQuery updates the page header and footer title/author metadata. A mini progress bar tracks reading progress, and the map container attaches to the viewport once scrolled past a threshold.

Aandrewxhill
90% 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
82% 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
82% 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
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
66% match