Groninger gemeenten

100%

Groninger gemeenten

✓ Published0🌍 Public

Last edited May 17, 2019

Created on May 15, 2019

The visualization displays the municipalities of the Dutch province of Groningen as an interactive SVG map. It uses D3.js v4 to render geographic paths from GeoJSON data, while Turf.js rewinds the polygon coordinates to ensure correct orientation. The map is projected with `d3.geoMercator` and fitted to the viewport using `projection.fitSize`. Hovering over a municipality triggers a tooltip with the municipality name, and the `path:hover` CSS rule highlights the area in orange. Boundary data originates from the PDOK WFS service, fetched via a URL with a CQL filter for selected gemeenten.

AI-generated description

Gemeenten in de provincie Groningen gevisualiseerd met Turf en D3. Bron: bestuurlijke grenzen WFS van PDOK.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Groninger gemeenten

This example visualizes the municipalities of the Dutch province of Groningen as a static SVG map. It shows the administrative boundaries of twelve selected gemeenten, using a Mercator projection fitted to the viewport. The visualization loads GeoJSON data from a PDOK WFS service, which provides the official administrative borders. The code uses D3 v4 with `d3.geoMercator` for projection and `d3.geoPath` to generate the SVG paths, appending a single `<path>` element per municipality within a 700×400 viewBox.

FFrieseWoudloper

95% match

Loading thumbnail…

Groninger gemeenten

The visualization displays the municipalities of the Dutch province of Groningen as a static choropleth-free map. It shows the boundaries and spatial arrangement of twelve named gemeenten, including Groningen, Delfzijl, and Oldambt. The map uses the d3.geoMercator projection and d3.geoPath to render GeoJSON features fetched from an ArcGIS REST service (ESRI’s Levende Atlas), with the projection fitted to the viewport via projection.fitSize. The SVG is sized responsively with a viewBox attribute. No interactive elements or color encodings are present beyond the default black vector paths.

FFrieseWoudloper

94% match

Loading thumbnail…

Groninger gemeenten

This map shows the municipalities of the northern Netherlands, with each municipality rendered as an SVG path using D3 v4 and TopoJSON data. The map uses a Mercator projection fitted to the viewport. Hovering over a municipality triggers a tooltip that displays the municipality’s name, creating an interactive way to explore the region. The visualization is built with D3.js and TopoJSON, with the geographic data processed in Mapshaper.

FFrieseWoudloper

93% match

Loading thumbnail…

Gist 3d7c0da4efc292e95700cda51537747d

This map visualizes the twelve municipalities of the Dutch province of Groningen, showing their boundaries as empty polygons with no fill. It uses a D3 v4 geoMercator projection centered on the province, with each municipality rendered as an SVG path element. The geographic data comes from the PDOK WFS service, requested as GeoJSON via d3.json. The map applies a gray stroke to outline each municipality, while intentionally leaving the polygons unfilled to emphasize the administrative borders over any thematic data.

FFrieseWoudloper

91% match

Loading thumbnail…

Groninger gemeenten

This example visualizes the municipalities of the Dutch province of Groningen using D3.js. The map is generated from multiple TopoJSON files (with and without bounding boxes, and with different quantization parameters) that were created with FME Desktop 2019. Due to mixed winding orders of the polygons, the initial rendering shows a rectangle instead of the correct municipality boundaries. The visualization demonstrates the impact of winding order and TopoJSON preprocessing on geographic data rendering. By comparing the different file versions, viewers can observe how the bounding box and the right-hand rule (Orientator transformer) affect the final output. The map displays the municipalities in the northern Netherlands, with the D3 code provided in index.html. A key challenge highlighted is the need for consistent polygon winding order to ensure correct D3.js visualization.**Title:** Groninger gemeenten **Description:** This visualization demonstrates a common pitfall in geographic data processing: winding order in polygon coordinates. The map displays the municipalities in the northern Netherlands, but due to mixed winding orders in the polygon definitions, D3.js renders a solid rectangle instead of the expected municipal boundaries. The author created four TopoJSON variants using FME Desktop 2019—with and without bounding boxes, and with different quantization parameters—to isolate the winding order issue. The accompanying `index.html` file contains the D3.js code used to visualize the files and reproduce the problem. This example is particularly useful for developers working with TopoJSON and D3.js, illustrating how winding order can affect rendering and how data preprocessing choices influence the final output. Source: [gist by FrieseWoudloper](https://gist.github.com/FrieseWoudloper)

FFrieseWoudloper

86% match

Loading thumbnail…

Gist b62153d4a07669c8305bc65ebaf7f381

This visualization shows a map of Dutch municipalities (gemeenten) rendered from a TopoJSON topology file. The SVG-based map uses D3 v4 to draw geographic boundaries, with each municipality outlined as individual paths. The animation animates the paths when the visualization loads, drawing the boundaries in sequence. The data source is a TopoJSON file containing the geometry of the Dutch municipal divisions, which is loaded and converted for display. The visualization highlights the boundaries between municipalities across the Netherlands, with the animated drawing effect emphasizing the shapes and spatial relationships of the regions.

FFrieseWoudloper

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

79% match

Loading thumbnail…

Neighbourhoods in the Province of Groningen

The map shows neighbourhoods in the province of Groningen, coloured by population density (BEV_DICHTH). Each district is represented as a vector polygon with a fill colour that encodes density, likely using a sequential colour scale. The map is rendered as an SVG from a GeoJSON file containing multipolygon geometries and attribute data, where the visualization draws the boundaries of each neighbourhood and colours them according to the density values. The overall design appears to be a straightforward choropleth map, focusing on the spatial distribution of population density across the province’s neighbourhoods.

FFrieseWoudloper

78% match