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

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

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

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

77% match

Loading thumbnail…

Gist d7a736227751a4a49072

This example demonstrates Torque, a CartoCSS compiler that renders animated point data directly on HTML canvas in the browser, bypassing server-side Mapnik processing for responsive visualizations. The code shows how CartoCSS rules are translated into canvas drawing instructions, with markers rendered efficiently using Sprites generated at runtime. It includes static torque maps, animated bubble maps that change size over time, and a non-map visualization, all leveraging the Torque library’s shader and cartocss_reference.js APIs. The approach keeps data client-side, enabling fast, interactive rendering of temporal geospatial data.

Aandrewxhill

75% match