Skip to main content
100%

MapBoxGL+D3 Practice

✓ Published0🌍 Public
YYasufumiSaito
Last edited Jan 6, 2016
Created on Jan 6, 2016

This choropleth map displays the population distribution across Japan's prefectures, overlaying colored TopoJSON regions onto a Mapbox GL base map. The visualization uses D3.js v3 for rendering the geographic paths as SVG elements, with a color scale mapping population values from light yellow to dark blue against a linear legend. Mapbox GL handles the interactive map navigation, while custom D3 projections and event listeners synchronize the SVG overlay with map movements, including a tooltip that shows prefecture names and population data on hover.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Japan Map

This visualization displays a map of Japan using D3.js, with each prefecture rendered as a green path. The map uses a Mercator projection with zoom and pan interaction enabled via D3’s `zoom` behavior. TopoJSON data is loaded and converted to GeoJSON using the `feature` API, then paths are drawn with `d3.geoPath`. The code leverages `d3.json` for data loading, `scaleOrdinal` and `schemeCategory10` for potential color scaling, and the `d3-geo-projection` library for projection support. The SVG output is styled with CSS.

Ggayuvurukuti@gmail.com
84% match
Loading thumbnail…

Japan Map

This visualization displays a choropleth map of Japan’s administrative regions, with each prefecture filled in a uniform red color and separated by white borders. The map uses an equirectangular-like Mercator projection via `d3.geoMercator` and renders geographic features with `d3.geoPath`. The code loads TopoJSON data for both states and districts, then applies `d3.scaleOrdinal` with a category color scheme, though only the state layer is drawn. Interactive zoom and pan are supported through D3’s `zoom` behavior, which transforms the SVG group containing the map paths.

LLakshmipriya-kalapala
84% 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
83% match
Loading thumbnail…

Fork of Japan Map

This choropleth map of Japan displays prefecture boundaries as red polygons with white strokes on a blank background. The visualization loads geographic data from a GitHub-hosted TopoJSON file and renders it using D3’s `geoPath` with a `geoMercator` projection. Interactive pan and zoom are enabled via D3’s `zoom` behavior, which applies transforms to the SVG group. The map uses static color fill from `scaleOrdinal` and `schemeCategory10`, with no hover or tooltip interactions. D3 version 5 and topojson are loaded via CDN.

NNikhilchiguru-8
82% 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
81% match
Loading thumbnail…

Fork of Japan Map

This example presents a zoomable choropleth map of Japan’s administrative regions, rendered as SVG paths filled with distinct colors from a categorical scale. Using D3 v5 and d3-geo-projection, it applies a Mercator projection clipped to the viewport, with pan and zoom enabled via d3.zoom. Geographic boundaries come from TopoJSON data (JPN_adm1), processed with topojson.feature and drawn using d3.geoPath. The map highlights each prefecture uniformly, with white strokes separating regions.

Vviswak12
81% match
Loading thumbnail…

Japan Map

This map of Japan displays its prefectures as semi-transparent purple regions, with each area labeled by its name. The visualization uses `d3.geoMercator` for projection and `d3.geoPath` to render GeoJSON features from a TopoJSON source of Japanese towns. A sequential color scale, `interpolatePurples`, shades each state based on its position in the dataset, while text labels are positioned using `pathGen.centroid`. The map is rendered as SVG and supports zooming via D3’s `zoom` behavior.

NNaveenaS12
81% match
Loading thumbnail…

Fork of Japan Map

This example displays a choropleth map of Japan’s prefectures, rendered as SVG paths with a uniform orange fill and white strokes. The code loads TopoJSON data twice via `d3.json` and uses `topojson.feature` to extract administrative boundaries. A `d3.geoMercator` projection with `d3.geoPath` draws the geography, while `d3.scaleOrdinal` and `schemeCategory10` are available for potential color encoding. The map supports pan and zoom through `d3.zoom`, transforming a grouped `<g>` element.

Ssivamani
81% match