Gist 3d7c0da4efc292e95700cda51537747d

100%

Gist 3d7c0da4efc292e95700cda51537747d

✓ Published0🌍 Public

Last edited May 27, 2019

Created on May 27, 2019

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.

AI-generated description

Gemeenten in de provincie Groningen gevisualiseerd met D3. Let op: polygonen zonder vulling!
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

92% match

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

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…

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

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

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

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.

FFrieseWoudloper

81% match