Skip to main content
SimilarExport ZIP
100%

ZONDER TURFFFFF

✓ Published0🌍 Public
FFrieseWoudloper
Last edited Sep 14, 2019
Created on Sep 14, 2019

This example displays a static map of Dutch arrondissementsgebieden (judicial districts) for 2019, rendered as SVG paths using D3 v4. It shows the geographic boundaries of these administrative regions, projected with a Mercator projection and fitted to a 700×400 viewport. The code fetches GeoJSON data from a Dutch national geodata WFS service, then uses `d3.geoPath` and `d3.geoMercator` to draw the features. The visualization emphasizes the shape and relative location of the districts without interactive or animated elements.

AI-generated description

Similar vizzes

Loading thumbnail…

ZONDER FITSIZE

This example visualizes Dutch administrative regions as a static SVG map, using geographic data from a national geodata service. It shows the shape and boundaries of municipal or regional divisions, rendered as a monochrome path layer. The code fetches GeoJSON directly from the service’s WFS endpoint via `d3.json`, then projects it with `d3.geoMercator` and draws each feature using `d3.geoPath` within a D3 v4 selection. The visualization relies entirely on D3’s geographic and selection APIs, with no additional interactivity or animation, and displays the result in an SVG container with a fixed viewBox.

FFrieseWoudloper
88% 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
88% match
Loading thumbnail…

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.

FFrieseWoudloper
86% match
Loading thumbnail…

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.

FFrieseWoudloper
86% match
Loading thumbnail…

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.

FFrieseWoudloper
84% match
Loading thumbnail…

arrondissementen in d3.js v3

This example visualizes Dutch administrative arrondissementen using a web Mercator projection. It shows a single combined path of the geographic boundaries, retrieved from a national georegister WFS service as GeoJSON, and renders it as an SVG path. The code uses d3.v3's `d3.geo.mercator()` for projection and `d3.geo.path()` to convert the GeoJSON features into a scalable vector graphic. A hardcoded scale parameter triggers an alert before the map is drawn, highlighting the projection’s default scale setting. The visualization focuses solely on the raw boundary shapes without additional styling or interaction.

FFrieseWoudloper
83% 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
82% match
Loading thumbnail…

Gist 88815dae2f6167aea4e388194e61857a

This example shows a choropleth-style map of Dutch police districts, with hover interactions that reveal the district name in a tooltip. The visualization loads geographic boundary data from a national geo-service via WFS, processes it with Turf.js to rewind polygon coordinates, and renders it as SVG paths using D3’s geoMercator projection and geoPath. Hovering a district turns it orange and displays a floating label, while mouseout fades the tooltip away. The code relies on D3 v3 for SVG manipulation and event handling, with Turf.js for geometry correction before projection.

FFrieseWoudloper
81% match