Trip animation – sequences (deck.gl + MapLibre)

100%

Trip animation – sequences (deck.gl + MapLibre)

✓ Published0🌍 Public

Last edited Nov 24, 2025

Created on Nov 25, 2025

A dark map of central London shows three animated taxi trips as glowing line traces. Using deck.gl’s TripLayer with MapLibre GL as the base map, each route is drawn as a sequence of colored trail segments that progressively reveal and then fade over time. The animation runs in a loop, with the three trips moving simultaneously through the city streets at different speeds, creating a sense of journey and flow. The WebGL rendering keeps the trails smooth and responsive, with subtle color differentiation between the three routes. The visualization is self-contained in a single HTML file, with a minimal UI and a map constrained to a square viewport.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7ebf9ba6e5ccb3a952025a99aef8e8a7

This visualization maps taxi trip paths across London using a deck.gl renderer on an SVG basemap. The trips data consists of sequences of GPS coordinates tracing vehicle routes through the city. A custom code node transforms the raw JSON into trip polylines, which are then passed to the DeckRendererOp for visualization. The example demonstrates a noodle-based workflow where a file loader reads trip data and feeds it through a code operation to render animated or static path overlays on a geographic basemap.

Aakre54

81% match

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

67% match

Loading thumbnail…

Flight Animation

This animated visualization plots historic sailing routes from OpenFlights data as glowing yellow arcs on a dark Stamen toner map. Using OpenLayers and D3, each route is drawn progressively as a great-circle arc between its source and destination ports, with the line growing over time at a constant rate. Flights are added sequentially with a delay, creating a staggered animation as the arcs trace their paths across the globe. The map uses the EPSG:3857 projection and the animation runs continuously via OpenLayers' postcompose event, rendering each flight's partial trajectory frame by frame until complete.

Aanojoual

66% match

Loading thumbnail…

Interactive and attempting to be more DRY with the code

This interactive visualization tracks a SmarTrip fare card’s balance over time, plotting each transaction from a Metro rail CSV as an animated SVG line chart. The code organizes shared logic (axes, scales, and rendering) into reusable functions, avoiding repetition. Data points—entries, exits, and sales—are distinguished by color and shape, with tooltips showing route segments and fare changes. The animation plays through the chronological sequence, highlighting the card’s declining balance as the commuter taps in and out between Tenleytown-AU and L'Enfant Plaza.

AAlexDaGr8

65% match

Loading thumbnail…

Advanced Interactive Map

This interactive map visualizes flight relations among US cities, allowing users to select a city and drag a year slider to animate the connections. The visualization uses a D3.js projection to place city markers and draws animated lines (paths) from the selected city to its destinations for the chosen year. Built with the Datamaps library, the map supports hover tooltips, click-to-select city interactions, and smooth transitions that animate the lines from the origin outward. The animation speed is controlled by a parameter, and the interface includes a year slider and city selection. The example is implemented in JavaScript with D3 and uses external JSON data files. The author provides an introductory blog post and the code is available under an MIT license.

BBruceHenry

64% match

Loading thumbnail…

Simple Flight Animation

A simple flight animation shows a white airplane moving along a curved route between Shanghai, Tokyo, and Hawaii over a green world map set against a steel-blue ocean. The map renders from world-continents.json using `topojson.feature` and `d3.geoMercator` with `d3.geoPath`. The plane follows a LineString with a 2-second `transition.attrTween` that calculates positions via `getPointAtLength` along the SVG path. Black circles mark each city’s projected coordinates.

GGerardoFurtado

64% match

Loading thumbnail…

activity 7.1

This interactive visualization shows the movement of flight paths across a global map using a three-dimensional globe. It displays animated arcs that connect various geographic locations, with each path represented by a flowing line that moves from its origin to its destination. The visualization uses Three.js, specifically `THREE.SphereGeometry` and `THREE.Points` to construct the globe and stars, while flight arcs are drawn with `THREE.Line` and animated using `requestAnimationFrame`. The data for flight routes is loaded from a CSV file, and geographic coordinates are projected onto the globe using a custom equirectangular projection function.

Jjureddyakshaya0601@gmail.com

64% match

Loading thumbnail…

Spinning globe with glowing city markers in D3

A D3.js visualization presents a spinning globe with glowing city markers, rendered using SVG animation. The globe continuously rotates, and over 4,000 city locations from the GeoNames database are dynamically reprojected and plotted as glowing points. The visualization, which uses a black background and elegant typography, is computationally intensive and optimized for Chrome browsers. It highlights global population distribution by representing cities with markers whose positions are recalculated in real time.

Aackuser

63% match