Fork of ICE -8 netherlands map

100%

Fork of ICE -8 netherlands map

✓ Published0🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

This interactive map of the Netherlands displays individual municipalities as clickable paths. Built with D3.js v6, it uses a geoMercator projection with `d3.geoPath` to render administrative boundaries from a TopoJSON dataset. Clicking a region zooms in via `d3.zoom`, highlights it in red, and shows its name in a tooltip. Panning and zooming are supported, with stroke widths adjusting inversely to zoom level.

AI-generated description

Halfway towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE -8 Nederland map

This interactive map of the Netherlands displays all 2020 municipalities as clickable SVG paths using d3.geoPath with a Mercator projection. Users can zoom and pan via d3.zoom, with click events triggering a smooth zoom transition to the selected municipality, which highlights in red. The map renders municipality outlines from a TopoJSON source, with hover states showing orange fills and titles. Zoom transformations update the group’s transform and stroke-width dynamically.

Ssaidhiraj16

90% match

Loading thumbnail…

ICE -8 netherlands map

This interactive map displays the municipalities of the Netherlands, rendered as individual SVG paths. Users can click on a municipality to zoom in on it, with the selected area highlighted in red, while hovering changes the fill color to orange. The visualization uses `d3.geoMercator` projection and fetches TopoJSON data for the year 2020 from Cartomap. The map employs the `d3.zoom` library for panning and zooming, with a smooth transition applied to the SVG group's transform.

Ssaidhiraj16

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

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

85% match

Loading thumbnail…

Fork of Fork of D3 Map Nederland

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.

KKeerthipriyaBankuru

84% match

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

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

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

82% match