Fork of Fork of D3 Map Nederland

100%

Fork of Fork of D3 Map Nederland

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This map of Dutch municipalities displays the country in a Mercator projection, initially in flat grey polygons which turn orange on hover and red upon selection. Clicking a municipality triggers a smooth, animated zoom for a detailed view; clicking the blank map resets the view. The visualization is built with D3.js version 6, using `d3.geoPath` for rendering and `d3.zoom` for pan-and-zoom interaction. It loads TopoJSON data from the `cartomap.github.io` repository.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Map Nederland

This interactive map of Dutch municipalities uses D3.js and TopoJSON to display the 2020 administrative boundaries. Users can click any municipality to zoom in and highlight it in red, while hovering turns regions orange. The visualization implements pan and zoom controls via d3.zoom, with smooth transitions between zoom levels. Geographic projections are handled with d3.geoMercator and d3.geoPath, loading data from a remote TopoJSON source. The SVG-based rendering includes dynamic stroke scaling to maintain consistent border visibility during zoom operations.

Tttummala17

94% match

Loading thumbnail…

Fork of D3 Map Nederland

This interactive map of the Netherlands displays provincial boundaries from a TopoJSON dataset, with municipalities colored in light grey. Clicking a municipality zooms in smoothly and highlights it in red, while clicking the background resets the view. The visualization uses `d3.geoPath` for geographic rendering, `topojson.feature` for data conversion, and `d3.zoom` to handle pan and zoom interactions, all rendered as SVG with animated transitions.

Jjoooms74

93% match

Loading thumbnail…

Fork

This interactive map of Dutch municipalities shows the administrative borders of the Netherlands, which users can click to zoom into a specific region. Clicking a municipality highlights it in red and smoothly animates the view to center on it, while clicking the background resets the map to its full extent. The visualization uses D3 v6 with the `d3.geoMercator` projection, `d3.geoPath` for rendering vector features, and the D3 zoom behavior (`d3.zoom`) to handle panning and scaling transforms. Data comes from a TopoJSON file of 2020 municipal boundaries fetched via `d3.json`, with hover states colored orange.

NNaveed945

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

90% match

Loading thumbnail…

D3 Map Nederland

This interactive map of Dutch municipalities uses a Mercator projection and TopoJSON data from cartomap.github.io. Users can click on any municipality to zoom in and highlight it in red, with hover states turning regions orange. The visualization applies d3-zoom for pan and zoom interactions, d3.geoPath for geographic rendering, and SVG transitions for smooth animation.

CChubby Racoon

89% match

Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands highlights individual municipalities, rendered as SVG paths and colored dark with light strokes. The visualization uses `d3.geoPath` with a Mercator projection, and `d3.zoom` enables panning and zooming. Clicking a municipality triggers a smooth transition that fills the selected region in red and zooms in on its bounds. The geographic data comes from a TopoJSON file fetched from Cartomap, and the map animates using D3 transitions.

CChubby Racoon

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

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