Skip to main content
SimilarExport ZIP
100%

Netherlands Map

✓ Published0🌍 Public
RRunnan Fu
Last edited Feb 12, 2021
Created on Feb 12, 2021
Forked from HTML Starter

An interactive choropleth map of the Netherlands visualizes tourism data from 2015 to 2020. A slider selects the year, updating the map and displaying tourism-related metrics. The visualization uses D3 v4 with `d3.geoPath` to render the SVG map from TopoJSON data, and employs a color scale to encode the values. The underlying data, sourced from JSON files, covers visitor and overnight accommodation statistics by country and accommodation type.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Netherlands Map

This interactive map visualizes tourism statistics across the Netherlands, allowing users to select a year via a slider to compare data from 2015 to 2020. The map displays provinces as colored regions using a choropleth, with hover effects highlighting boundaries and tooltips revealing values. The visualization uses D3 v4 with `d3.geoPath` and TopoJSON to render the map, while a bar chart shows accommodation and visitor breakdowns from the accompanying JSON datasets.

RRunnan Fu
95% match
Loading thumbnail…

D3 Map Nederland

An interactive choropleth of the Netherlands' 2020 municipalities allows users to click any region, which highlights it in red and smoothly zooms in via a geometric zoom transform. The map renders SVG paths using d3.geoPath with a Mercator projection, while interaction relies on d3.zoom for pan/zoom transitions. Hovering turns a municipality orange. Data comes from a remote TopoJSON file of the `gemeente_2020` boundaries, styled with light gray fills and subtle black strokes.

BBrian Bawuah
83% match
Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands displays provincial boundaries, which users can click to zoom and highlight in red, with a click on the background resetting the view. Built with D3 v6 and TopoJSON, it uses `d3.geoPath` and a Mercator projection to render the shapes, while `d3.zoom` handles panning and scaling between 1x and 8x. The data loads from a remote TopoJSON file via `fetch`, and transitions animate the zoom and fill changes. Hover effects turn regions orange, and SVG elements are used for all rendering.

Llamartm
79% 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
79% match
Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands displays all municipal boundaries, which users can click to zoom in on and highlight in red, with pan and zoom controls supporting magnification up to 8 times. The visualization uses D3.js with `d3.zoom`, `d3.geoPath`, and TopoJSON to render the geographic data from a topojson file of 2020 Dutch municipalities. Hovering over a region turns it orange, while clicking resets the view or transitions the map using animated `transition.attrTween` effects.

Ssreen020
79% match
Loading thumbnail…

Population Density Map of the Netherlands

This choropleth map visualizes population density across Dutch neighborhoods using a TopoJSON of administrative boundaries. Each polygon is filled according to its population density, with colors highlighting the spatial distribution of inhabitants per area. The view is rendered as an SVG, and an animated transition gradually reveals or recolors the map to emphasize density differences across regions. The dataset encodes each neighborhood's boundary geometry as arcs, which are transformed into a visual hierarchy of density through sequential updates, creating a clear, interactive overview of population concentration in the Netherlands.

JJulesBlm
79% match
Loading thumbnail…

Gist dbbbf5036a38b2eb912d97805615c7f5

This visualization displays a single choropleth-style map of the Netherlands, showing generalized administrative regions for 2019. It uses a Mercator projection to render geographic boundaries as SVG paths. The code relies on D3.js v3, specifically `d3.geo.mercator` for projection and `d3.geo.path` to draw the shapes, while fetching GeoJSON data from the Dutch national geodata WFS service. The map is rendered on a 1200×500 pixel canvas with no additional styling or interaction.

FFrieseWoudloper
78% 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
78% match