Mapbox - Extruding circles (choropleth)

100%

Mapbox - Extruding circles (choropleth)

✓ Published0🌍 Public

Last edited Feb 23, 2021

Created on Feb 18, 2021

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.

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 (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

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

90% match

Loading thumbnail…

Display a map

This choropleth map shows the gender ratio of Japan’s population by prefecture, overlaid on a Mapbox light-v9 basemap. The code merges official 2017 population statistics from a TSV file with geographic boundaries from a GeoJSON file using D3 v5’s `d3.json` and `d3.tsv`. A Mapbox GL map renders the fill colors, using a color-stops legend with thresholds for the ratio. Clicking a prefecture displays its name in a popup and briefly highlights it by setting a special value.

HHirosaji

72% match

Loading thumbnail…

Let's make a JPN map with D3.js!

This example displays a black-and-white map of Japan with prefecture boundaries rendered as white strokes, using the jpn-atlas dataset as its geographic source. It loads the data from a remote JSON file and applies a Mercator projection through `d3.geoMercator` and `d3.geoPath` to generate SVG paths for each prefecture. The code uses `topojson.feature` to convert the TopoJSON into GeoJSON, then binds the features to path elements in the SVG. The visualization demonstrates a straightforward D3 v5 workflow for choropleth preparation.

Ddaigokawabe

72% match

Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Clickeble Canvas Tiles Map

This interactive map displays Japanese municipal boundaries using vector tiles rendered onto Canvas elements within a Leaflet.js map. The visualization employs geojson-vt.js to convert GeoJSON data into tile-based vector features, which are then drawn using D3.js for click interaction handling. Each polygon is rendered with a unique picking color, enabling feature identification through Canvas `getImageData` pixel inspection on mouse events. The map supports zoom-dependent styling with adjustable line widths and dash patterns, showing prefectural city data including Sendai and Ora-machi boundaries.

HHirosaji

71% 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…

Japan Map

This choropleth map of Japan displays its administrative regions in warm red-orange fills against a white background. The visualization uses `d3.geoMercator` for projection, `d3.geoPath` to render geographic features, and `topojson.feature` to convert TopoJSON data. It supports zooming through the D3 zoom behavior, with pan and scale applied to a grouped SVG element. The map is built with React and rendered as SVG, using data loaded from a GitHub Gist.

TTejamod

70% match