Route object architecture in Mapbox API

100%

Route object architecture in Mapbox API

✓ Published0🌍 Public

Last edited Apr 19, 2020

Created on Apr 19, 2020

This example visualizes the nested structure of a Mapbox API route object, showing how a route contains legs, steps, maneuvers, and instruction objects. Built as an interactive tree diagram, it uses the D3.js force-directed layout via `d3.forceSimulation` to position nodes, with edges drawn using SVG paths. The code parses a static JSON gist file containing the route schema and renders each object type as a colored node, with child objects branching downward. Labels identify each object’s role, and the layout updates dynamically as the simulation settles into a stable arrangement.

AI-generated description

Similar vizzes

Loading thumbnail…

Route Probability Exploration with Parallel Coordinates

This interactive visualization combines a parallel coordinates plot with a geographic map to explore route data from the ORBIS Roman Empire model. Each polyline represents a route, with dimensions such as month, priority, expense, duration, and length arranged as parallel axes. Clicking an axis title recolors routes according to that dimension using a blue-to-red ramp. Brushing along an axis filters the displayed routes, with matching routes highlighted in red on both the coordinates and the map. The map renders route geometries from the TopoJSON data, while the parallel coordinates chart uses d3.svg.axis and d3.svg.brush for interactive filtering. The visualization animates route paths and color-codes them by month or selected dimension, supporting exploration of how route probability relates to multiple factors. The layout places a map at top and the parallel coordinates below, with dashed routes on the map and semi-transparent lines in the chart. This example uses D3 v3 with the geo projection and TopoJSON plugins.

CCraftbd

67% match

Loading thumbnail…

D3 test

This example visualizes a historical route from a GeoJSON file, displaying daily segments as dashed black polylines over a light blue graticule-filled map. The code uses D3 v5 with an SVG rendering approach and a Mercator projection configured via `d3.geoMercator()`. It loads coastline and route data with `d3.json()`, then binds the features to SVG paths using `d3.geoPath()`. The graticule is generated with `d3.geoGraticule()`. The visualization clearly shows the path’s progression across the mapped region, with each day’s travel distinguished by styling properties like stroke dasharray.

MMarin Govorcin

67% match

Loading thumbnail…

Mapbox - Extruding circles (stacked)

This example visualizes Japanese towers with observation decks using Mapbox GL JS and D3 v5. It renders filled 3D extruded circles on a map, with the stacked heights representing each tower’s total height and its observation deck altitude, colored blue and red at hover. The code loads tower height data from a CSV, geocodes points, and uses Turf.js to create circular polygons that are extruded via Mapbox’s fill-extrusion layers and feature-state hover styling.

HHirosaji

66% match

Loading thumbnail…

GPS

This example visualizes GPS route data on an interactive map, showing a path of timestamped waypoints overlaid on OpenStreetMap tiles. The map centers on the route’s starting location and renders the track as a red line connecting green waypoints. Built with D3.js v5 and Leaflet, the code uses `d3.geoPath` with a custom `d3.geoTransform` to project GeoJSON coordinates into Leaflet’s layer points, while SVG elements are appended to the map’s overlay pane for animation and styling.

XXiaoyu Su

66% match

Loading thumbnail…

d3Edge_V5-drawRoutes-v0.1

This example builds an interactive map of Zurich and draws transit routes from a GeoJSON file using D3 v5. It demonstrates a modular map component that initializes a Mercator projection and sets up SVG rendering for geographic paths. The code explores loading GeoJSON data asynchronously via `d3.json` and a promise-based `.then()` callback, while a commented data manager module shows an alternative approach using `d3.dispatch` for custom events. Route data comes from the D3Edge GitHub repository, and the visualization uses `d3.geo.mercator` and `d3.geo.path` for projection and path generation.

JJimMaltby

65% match

Loading thumbnail…

Mapbox - Extruding circles (gradient)

A Mapbox GL map visualizes Japanese towers with observation decks, displaying each as a stack of extruded circular layers whose heights encode tower height. D3.js parses CSV data, while Turf.js generates circular geometries at each tower’s coordinates, and Mapbox’s fill-extrusion layers render them with a gradient color scale. Hover interactions reveal the tower name and heights, sourced from the Kiso Sansen Park and social statistics datasets.

HHirosaji

65% match

Loading thumbnail…

Route Probability Exploration with Parallel Coordinates

This interactive visualization pairs a parallel coordinates plot with a geographic map to explore route probabilities from the ORBIS dataset. The parallel coordinates chart encodes each route as a polyline spanning axes for month, priority, expense, duration, and length, with color indicating the selected route attribute. Brushing on any axis filters routes by that dimension, and clicking an axis title re-colors the routes according to that variable's color scale, ranging from blue through green, gold, orange, and red. The linked map displays the corresponding route paths, and both views update together. The visualization is built with D3 v3, uses topojson for map geometry, and includes animated transitions when switching color dimensions.

CCraftbd

65% match

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi

64% match