Groninger gemeenten

100%

Groninger gemeenten

✓ Published0🌍 Public

Last edited May 17, 2019

Created on May 17, 2019

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.

AI-generated description

This is a TopoJSON file of municipalities in the north of The Netherlands visualized with D3.js. The TopoJSON file was created using Mapshaper.org.

Similar vizzes

Loading thumbnail…

Groninger gemeenten

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.

FFrieseWoudloper

93% match

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

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

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

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

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

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

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

81% match