Mapbox - Extruding circles (stacked)

100%

Mapbox - Extruding circles (stacked)

✓ Published0🌍 Public

Last edited Feb 23, 2021

Created on Feb 18, 2021

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.

AI-generated description

▶︎ Data source: 国営木曽三川公園Webサイト, 社会実情データ図録, Geocoding

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Mapbox - Extruding circles (simple)

This visualization displays Japanese towers with observation decks on a 3D Mapbox globe, extruding each structure as a blue cylinder whose height corresponds to the tower’s full height—hovering highlights the shaft in red and shows the name, tower height, and observatory height in an info panel. The example loads tower data from a CSV file via D3’s `d3.csv`, geocodes the coordinates into GeoJSON points, and uses Mapbox’s `fill-extrusion` layer to render the bars. Turf’s `turf.circle` generates circular polygons around each point, while `mapObj.queryRenderedFeatures` and `setFeatureState` manage the interactive hover state. The map is tilted at a 60-degree pitch, and the towers’ extrusion heights are scaled by a factor of 600.

HHirosaji

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

92% match

Loading thumbnail…

Mapbox - Extruding circles (choropleth)

This map visualization shows the locations and heights of Japanese towers with observation decks, using extruded circles on a 3D Mapbox globe. The towers are colored on a yellow-to-red scale based on total height, and hovering over a polygon changes its color to a blue-green scheme and displays the tower's name and height in a white info panel. Built with Mapbox GL JS and d3.v5, the code loads tower data from a CSV, projects point locations into circular polygons using the Turf library, and applies `fill-extrusion` layers with feature-state hover styling. The data comes from the Kiso Sansen National Government Park website and the Social Atlas of Japan.

HHirosaji

92% match

Loading thumbnail…

leaflet - Markers on map

This example uses the Leaflet mapping library to place interactive markers on a tile-based map of Tokyo. A small CSV dataset provides the station names and geographic coordinates for each marker, which are loaded with d3.csv. The map background is rendered using Mapbox tile layers, and each station marker is bound to a popup that displays its name. The visualization combines Leaflet’s map interactions with D3’s data-loading capabilities to create a straightforward geographic point display.

HHirosaji

72% match

Loading thumbnail…

leaflet - Map with D3.js outline

This example combines Leaflet with D3.js to render a geographic map of Japanese prefectures. It displays a GeoJSON polygon of Tottori Prefecture, overlaid on a tile layer from the Geospatial Information Authority of Japan. The code uses Leaflet’s `L.map` and `L.tileLayer` for base tiles, while D3’s `d3.geo.path` with a custom `d3.geo.transform` projection converts latitude/longitude coordinates to screen points via `map.latLngToLayerPoint`. The D3-selected SVG paths are redrawn on Leaflet’s `viewreset` event.

HHirosaji

71% match

Loading thumbnail…

Mapbox - ScrollyTelling with FreeCamera API

A scrolling narrative climbs Mt. Fuji using a Mapbox map with the FreeCamera API. As the user scrolls, the camera moves along a defined route while the view follows a hiking path drawn as a line layer, with terrain exaggeration and an atmospheric sky. The example combines Mapbox GL JS, D3.js for CSV data loading, and Turf.js to interpolate the camera and target routes.

HHirosaji

71% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

71% match

Loading thumbnail…

leaflet - Map on D3.js points

This example shows a Leaflet map displaying Japanese land price survey points as red circles over a tile-based base map, with the points positioned using geographic coordinates. The visualization combines Leaflet’s mapping and tile-layer API with D3.js to render the data: D3 is used to select the map’s SVG layer, append a group, and create circle elements from a GeoJSON file. The circles’ positions are updated via `map.latLngToLayerPoint`, which converts latitude and longitude into screen coordinates during map view changes. The example uses leaflet 0.7.7 and D3.v3, loading data from `landprice.geojson`.

HHirosaji

70% match