Let's make a map with D3.js!

100%

Let's make a map with D3.js!

✓ Published0🌍 Public

Last edited Nov 2, 2020

Created on Nov 2, 2020

This example demonstrates an interactive map of Dutch municipalities, with each region rendered as a clickable SVG path. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the map from TopoJSON data fetched via `d3.json`. Users can zoom and pan the map through the `d3.zoom` behavior, while clicking a municipality triggers a placeholder handler. The map loads municipal boundaries from cartomap.github.io, and the code includes a structure for resetting the view and adding tooltips with municipality names.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth-style map of Dutch municipalities, rendered as SVG paths over a blue sphere. The map uses a Mercator projection centered on the Netherlands, with each municipality outlined and labeled with its official name via a tooltip. The code imports geoMercator, geoPath, and json from D3 v5, alongside topojson’s feature method, to load and convert a TopoJSON dataset of 2020 municipal boundaries from cartomap.github.io. Municipalities are appended as path elements, with their names shown on hover.

JJordy Fronik

91% match

Loading thumbnail…

D3 Map Nederland

This example displays a zoomable map of Dutch municipalities using SVG paths colored light blue with dark outlines. Hovering highlights each region in blue, and a title tooltip reveals the municipality name and ID. The visualization uses D3 v5 with `d3.json` to load TopoJSON data, `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3-zoom` for interaction. Data comes from the cartomap GitHub-hosted `gemeente_2020.topojson` file.

JJordy Fronik

89% match

Loading thumbnail…

D3 Map Nederland

This example displays an interactive map of Dutch municipalities, coloring each region in light blue with black outlines and highlighting areas in solid blue on hover. The visualization loads geographic data from a TopoJSON file and renders it as SVG paths using D3 v5 with a Mercator projection. It employs d3.json to fetch the data, d3.geoPath with geoMercator for drawing shapes, and includes d3-zoom.v2 for potential panning and scaling capabilities. The hover effect is implemented through CSS, and each municipality includes a tooltip showing its name and ID.

Mmbergevoet

88% match

Loading thumbnail…

D3 Map Nederland

This example renders a choropleth map of Dutch municipalities using the D3 v5 library and TopoJSON data from cartomap.github.io. It draws each municipality as an SVG path using d3.geoPath with a geoMercator projection centered on the Netherlands. The code fetches the TopoJSON file, converts it to GeoJSON with topojson.feature, and appends the paths to an SVG group. The visualization demonstrates basic map projection and geographic data rendering with D3’s geo module.

ZZekkieB

88% match

Loading thumbnail…

Lets make a MAP with d3 :)

This interactive map displays the municipalities of the Netherlands, rendered as green SVG paths with orange borders atop a pink sphere. It uses the d3.geoPath and d3.geoMercator APIs to project TopoJSON data from cartomap.github.io. A red circle is also placed using a projection call, though its data binding appears incomplete. The visualization incorporates d3.zoom to enable pan and zoom interactions, which apply a transform to the map group.

SSimonPlanje

88% match

Loading thumbnail…

D3 Map Nederland

A choropleth map of Dutch municipalities loads from a TopoJSON file and renders each region as an SVG path. Clicking a municipality highlights it in red and triggers a smooth, animated zoom using `d3.zoom` with a `geoMercator` projection and `geoPath`. Hovering changes the fill to orange. The zoom transition, defined with a duration and easing function, centers on the selected region, while the `zoom` event handler adjusts the group transform and stroke width.

CChubby Racoon

87% match

Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands shows each Dutch municipality as a clickable SVG path. Clicking a region zooms in smoothly and highlights it in red, while clicking the background resets the view. The map uses D3’s `d3.geoMercator` projection and `d3.geoPath` for geometry, with `d3.zoom` handling pan and zoom transforms. Municipal boundaries come from a TopoJSON file of the 2020 administrative divisions, rendered via topojson.feature. Hover effects change path fills to orange.

BBrian Bawuah

87% match

Loading thumbnail…

D3 Map Nederland

This visualization displays an interactive map of Dutch municipalities, allowing users to click any region to zoom in and highlight it in red. Hovering turns municipalities orange, and clicking the background resets the view. Built with D3 v6 and TopoJSON, it uses a Mercator projection via `d3.geoPath` and implements zoom/pan with `d3.zoom`, applying smooth transitions through `transition.attrTween`. Municipal boundary data comes from a remote TopoJSON file fetched at runtime, rendered as SVG paths with animated scaling.

Ssreen020

87% match