Skip to main content
SimilarExport ZIP
100%

Odyssey.js Slides

✓ Published0🌍 Public
SSaminu
Last edited Jan 31, 2017
Created on Jan 31, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/andrewxhill/'>andrewxhill</a>'s block: <a href='http://bl.ocks.org/andrewxhill/adfe383cd9e4c02296be'>Williams Transco leak history </a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3b829f1f7c456d8f1582a041943e8e0a'>Pipeline Leaks Nigeria</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e5fafa33b0ab433b4c0ae4c5da15e024'>Pipeline Leaks Nigeria</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Health Tech Accelerators

This interactive map-based story uses a scrolling interface to guide viewers through the locations of health tech accelerators. The visualization pairs a CartoDB-powered basemap with an Odyssey.js scroll-driven narrative, where map bounds and sublayer SQL queries update as the user progresses. It shows a sequence of geographic focuses, with text overlays providing context, while the map re-centers and re-filters data for each section. The code leverages the Leaflet and CartoDB libraries, with a custom scroll trigger managing the transitions between stops.

BBenHeubl
61% match
Loading thumbnail…

Codu_presentation

A click-driven narrative presentation demonstrates text animation and custom Svelte components for storytelling. It uses GSAP with TextPlugin to sequence title and subtitle changes, while animating SVG circles through different states: initially as a row, then collapsing to zero, and finally repositioning into a bar chart with axes. The visualization references geographic data via a CSV file containing positional coordinates and color groups. On the final step, a video embedded from GitHub appears to complement the narrative flow.

Rrudi.oreillymeehan@gmail.com
60% match
Loading thumbnail…

Mapbox Storytelling

This interactive map tells a scrollytelling story about Philadelphia’s bicycle infrastructure. Using the Mapbox GL JS API, a fixed map is paired with scroll-driven chapters that reveal and hide separate layers—such as bike lanes, Indego bike-share stations, and trail networks—by adjusting their paint property opacities. The Scrollama library and Intersection Observer handle the chapter activation, while a JavaScript config file defines the narrative content and camera positions.

TThandolwethu Shakes Dlamini
59% match
Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

HHirosaji
59% match
Loading thumbnail…

Leaflet Timeline Slider

This example uses the Leaflet mapping library to visualize a collection of geographic points as markers on an OpenStreetMap base layer. A timeline slider enables navigation through different story titles, such as "Day 1" and "1776," filtering the displayed GeoJSON features by their title property. When the slider value changes, the code removes existing markers and adds new ones from the filtered data, fitting the map bounds to the marker group and binding popups that show story content and progress. The implementation relies on jQuery and Leaflet's map, tileLayer, geoJson, and featureGroup APIs.

SSam Hege
59% match
Loading thumbnail…

Story Map D3JS

This example presents a scrollable story map that follows the historical travels of Bošković as a sequence of dated path segments across a geographic region. It shows the journey as a continuous line with distinct daily segments, highlighted by city markers along the route. The visualization is built using D3.js v5.15.0, utilizing the Mercator projection and topological data from JSON files. It renders the map as an SVG and incorporates scroll-driven animation to reveal the narrative of the journey as the user scrolls.

MMarin Govorcin
58% 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
58% match
Loading thumbnail…

Health Tech Accelerators

This visualization presents a map-based story about health tech accelerators, showing their geographic distribution across a world map. Using CartoDB and Leaflet, the page layers geographic points onto a base tile layer, with scroll-driven navigation controlling the narrative. The code employs Odyssey.js to bind story events to scrolling, adjusting the map’s view and filtering data through SQL queries on CartoDB’s visualization layer. The visualization relies on CartoDB’s tile and data services, with the map centered initially on [0,0] and zooming to fit accelerator locations. The title and author credits appear in a footer, sourced from a gist by BenHeubl.

BBenHeubl
58% match