arrondissementen in d3.js v3

scale 200

This example shows a single unprojected map of Dutch arrondissement areas, rendered as a static SVG path. The visualization uses a Mercator projection with a fixed scale of 500, centering the geographic data on a 960×500 canvas. The code loads GeoJSON from a national georegistry Web Feature Service (WFS) endpoint, specifically the generalized 2019 CBS arrondissement boundaries. D3 v3’s `d3.geo.mercator()` and `d3.geo.path()` handle the projection and path generation, while the `d3.json` method fetches the remote data and appends the resulting path to the SVG container.

87% match

Gist 7a936b232f3444758c3bfc5775324231

This example shows a static map of Dutch arrondissements (districts) for 2019, rendered as a single SVG path using a Mercator projection. The code loads GeoJSON data from a national georegister Web Feature Service (WFS) endpoint via `d3.json`. It uses `d3.geo.mercator` and `d3.geo.path` to project and draw the geographic features. The visualization is minimal, displaying only the district boundaries without additional styling or interactivity.

87% match

test met arrondissementen

This example visualizes Dutch administrative districts ("arrondissementen") as vector polygons on an SVG map. The map renders GeoJSON geometry from an external dataset (arrondissementen.json), with each district drawn as a filled path using D3 v3. The visualization focuses on the spatial layout of the arrondissementen, with district boundaries clearly delineated. The rendering highlights the geographic distribution and relative positions of these administrative areas, though it does not encode additional quantitative variables in the static view.

86% match

Arrondissementsgebieden

This example visualizes Dutch judicial districts as interactive map shapes, highlighting each region on hover. It shows administrative boundaries sourced from a national geodata WFS service, with tooltips displaying district names. The code uses D3 v4’s `d3.geoPath` and `d3.geoMercator` projection, alongside Turf.js to rewind GeoJSON polygons for correct rendering. SVG paths change fill color on mouseover, while a custom HTML tooltip follows the cursor, all within an animated, zoomable viewport.

test met scale 150

This example displays a static map of Dutch arrondissement areas, projected using a Mercator projection at a scale of 150. It uses D3 v3 to fetch GeoJSON data from a national georegister WFS service and renders it as an SVG path. The visualization shows the geometry of CBS administrative regions for 2019, without additional styling or interaction. The code relies on `d3.geo.mercator` and `d3.geo.path` to project and draw the geographic features, while the data is loaded via `d3.json`.

arrondissementen zonder turf

This example shows a choropleth-style map of Dutch police districts (arrondissementen) from 2019, highlighting each region on hover with an orange fill and a text tooltip that reveals the district’s name. The visualization relies on the D3 v4 library, using `d3.geoMercator` for projection and `d3.geoPath` to render the GeoJSON features fetched from the Dutch national georegister WFS service. The tooltip appears near the cursor via D3’s event handling, while the SVG paths are drawn with a light gray fill and white strokes, with hover interactions triggering the color change and tooltip display.

Oefenen met scale

This example demonstrates how to load and display geographic boundary data from a Web Feature Service (WFS) endpoint using D3.js. It shows a map of Dutch arrondissementsgebieden (judicial districts) for 2019, projected with a Mercator projection. The code uses `d3.json` to fetch GeoJSON from the national georegister WFS, then renders it as SVG paths via `d3.geo.path` with a `d3.geo.mercator` projection. A simple alert greets viewers before the visualization loads, and the SVG canvas is sized to 960 by 500 pixels.

Zonder turf in d3v3

This example shows a choropleth-style map of Dutch arrondissements, with hover highlighting in orange and a tooltip. It uses D3 v3 with a Mercator projection and `d3.geo.path()` to render GeoJSON features as SVG paths. The map loads data from a public WFS service, styling regions with light gray fills and white strokes. The code explicitly sets the projection’s translate but leaves the scale at its default, so the map may appear cropped or misaligned. A CSS tooltip is defined but not implemented in the script.