Skip to main content
SimilarExport ZIP
100%

Zonder turf in d3v3

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

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.

AI-generated description

Similar vizzes

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

ZONDER TURFFFFF

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.

FFrieseWoudloper
86% match
Loading thumbnail…

D3 Map Nederland

This example renders a choropleth map of Dutch municipalities using the D3 v5 library and TopoJSON data from cartomap.github.io. It draws each municipality as an SVG path using d3.geoPath with a geoMercator projection centered on the Netherlands. The code fetches the TopoJSON file, converts it to GeoJSON with topojson.feature, and appends the paths to an SVG group. The visualization demonstrates basic map projection and geographic data rendering with D3’s geo module.

ZZekkieB
84% 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
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth-style map of Dutch municipalities, rendered as SVG paths over a blue sphere. The map uses a Mercator projection centered on the Netherlands, with each municipality outlined and labeled with its official name via a tooltip. The code imports geoMercator, geoPath, and json from D3 v5, alongside topojson’s feature method, to load and convert a TopoJSON dataset of 2020 municipal boundaries from cartomap.github.io. Municipalities are appended as path elements, with their names shown on hover.

JJordy Fronik
84% match
Loading thumbnail…

D3 Map Nederland

This example displays a zoomable map of Dutch municipalities using SVG paths colored light blue with dark outlines. Hovering highlights each region in blue, and a title tooltip reveals the municipality name and ID. The visualization uses D3 v5 with `d3.json` to load TopoJSON data, `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3-zoom` for interaction. Data comes from the cartomap GitHub-hosted `gemeente_2020.topojson` file.

JJordy Fronik
84% match
Loading thumbnail…

D3 Map Nederland

A choropleth map of Dutch municipalities loads from a TopoJSON file and renders each region as an SVG path. Clicking a municipality highlights it in red and triggers a smooth, animated zoom using `d3.zoom` with a `geoMercator` projection and `geoPath`. Hovering changes the fill to orange. The zoom transition, defined with a duration and easing function, centers on the selected region, while the `zoom` event handler adjusts the group transform and stroke width.

CChubby Racoon
84% match