Skip to main content
100%

Gist 7ebf9ba6e5ccb3a952025a99aef8e8a7

✓ Published0🌍 Public
Aakre54
Last edited Nov 26, 2025
Created on Nov 25, 2025

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Trip animation – sequences (deck.gl + MapLibre)

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.

Aakre54
81% match
Loading thumbnail…

Gist eb7cd9a65aadb68945adc87e0e8c343d

This example visualizes the tram and metro network of an unnamed city using a TopoJSON topology. It shows routes as geographic paths overlaid on a map, with the data sourced from a gist by JulesBlm. The visualization uses D3.js to load and parse the TopoJSON file, then renders the network through its projection and path generation APIs, displaying the transit lines as connected arcs.

JJulesBlm
71% 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
70% match
Loading thumbnail…

Gist 7e9f06554273832dea5dcd8449410041

This map displays bicycle itineraries as multicolored line segments overlaid on a geographic basemap. The GeoJSON data encodes route paths as MultiLineStrings, with each feature labeled by an itinerary identifier (`icr`) and a flag for whether it contains waypoints (`balises`). The visualization renders the cycling network, likely using color or line style to distinguish route numbers, and shows how individual segments connect to form the larger path system across the mapped area.

Aantoinedejonckheere
68% match
Loading thumbnail…

Gist 6112837

This example visualizes the 2008 cohort of vehicle test records from a gist, mapping individual vehicles as nodes in a force-directed network. The visualization uses d3.forceSimulation to compute node positions based on shared attributes like make and fuel type, while d3.geoPath renders a geographic backdrop for postcode regions. Canvas getImageData samples pixel colors for a density heatmap overlay, and transition.attrTween animates node movements during filtering. The schema.ini file defines the pipe-delimited data structure, and the code reads the CSV directly from the gist to drive the interactive layout.

IIanHopkinson
68% match
Loading thumbnail…

Gist 9bced4725e5b57820cd766d123aa6686

This visualization uses GeoJSON data of cycling routes in Brussels, rendered as a multi-line map. The line segments are color-coded and appear to form a connected network of bicycle paths across the city, with a legend distinguishing named routes such as "Kleine ring" and "Noord-Zuid".

Aantoinedejonckheere
68% match
Loading thumbnail…

RailAmsterdam

RailAmsterdam is a custom geographic visualization of Amsterdam’s neighborhoods rendered as SVG, using D3 v4 to draw a TopoJSON topology. The example encodes neighborhood boundaries via projected vector paths, with mouse interaction highlighting individual districts.

JJulesBlm
67% match
Loading thumbnail…

WWSD #11: Mapbox-gl + d3 SVG overlay

This example shows London Overground stations as animated dots on a zoomable, pannable Mapbox-gl map. The visualization uses a Mapbox-gl base map with an SVG overlay manipulated by d3, where each station appears as a small circle that grows from radius 1 to 6 pixels on load. The d3 geo-mercator projection is recalculated on every map move or viewreset event, using the map’s center, zoom, and a hardcoded tile size of 512 to keep the dots aligned with the underlying geography. The station locations come from a TopoJSON file fetched via d3.json, and the code relies on the `topojson.feature` conversion to render the point features.

663anp3ca
67% match