Alternate version with checkboxes

100%

Alternate version with checkboxes

✓ Published0🌍 Public

Last edited Nov 12, 2020

Created on Nov 12, 2020

This visualization plots parking areas across the Netherlands on a zoomable, pannable SVG map using d3.geoMercator and d3.geoPath. It loads geographic data from the RDW open dataset, cleans coordinates with custom parsing logic, and renders municipalities from a TopoJSON file. Checkboxes for three area managers (363, 518, 2448) trigger an updateAreaManager function that recolors and enlarges their associated points to red. A reset button restores the default zoom using d3.zoom and a transition.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

New filter and transform

This example visualizes parking areas across the Netherlands on a map. It displays the data as small circles positioned using longitude and latitude coordinates, with a zoom feature via `d3.zoom` and a reset button. The map is rendered with SVG paths generated from TopoJSON data using `d3.geoPath` and a Mercator projection. The code filters the dataset by area manager ID, allowing users to switch between different managers' parking territories. Data is fetched from the RDW Open Data API, and city coordinates are retrieved from the HERE Geocoding API using `d3.json`.

Mmbergevoet

84% match

Loading thumbnail…

New filter and transform

A map of parking areas across the Netherlands, overlaid as black dots on a light municipal boundary layer, supports interactive zooming and three buttons that highlight the records of specific area managers. The visualization uses D3 v6 with a Mercator projection (`geoMercator`) and `geoPath` to render TopoJSON shapes, while fetching and cleaning RDW open data to extract longitude and latitude coordinates from geometry strings. Unexecuted code references HERE geocoding to plot city markers, but only the parking dots and zoom controls are active.

SSamSlotemaker

83% match

Loading thumbnail…

New code structure

This interactive map visualizes where parking facilities are located relative to city centers across the Netherlands, with buttons to filter parking spots for Amsterdam, Den Haag, Rotterdam, and Utrecht. The visualization uses d3.geoMercator and d3.geoPath to project Dutch township boundaries from TopoJSON, while parking locations are fetched from the RDW Open Data API, cleaned, and drawn as blue circles around a red city center marker. The code relies on d3.select, d3.json, d3.zoom, and TopoJSON's feature extraction, with SVG rendering and transition-based animations for zoom resets.

Mmbergevoet

81% match

Loading thumbnail…

New filter and transform with gist from cities

This example shows parking areas distributed across the Netherlands, overlaid with the 25 largest cities. Users can zoom and pan the map, with buttons to reset the view or highlight specific area managers, though the filtering logic is incomplete. The visualization uses D3 v6 with a Mercator projection and d3.geoPath to render Dutch municipal boundaries from TopoJSON, while fetching parking-geometry data from the RDW open-data API and city coordinates from a GitHub gist. Circles are plotted using cleaned longitude–latitude pairs, with hover effects on the township paths.

Mmbergevoet

80% match

Loading thumbnail…

New filter and transform

This visualization displays parking areas across the Netherlands as black dots on a map of Dutch municipalities. The map is rendered using SVG paths created with `d3.geoPath` and a Mercator projection (`d3.geoMercator`), with the municipality boundaries sourced from a TopoJSON file. Parking data is fetched from the RDW open data API, then cleaned and transformed into latitude/longitude coordinates via custom `cleanData` and `transformData` functions, before being plotted as circles. The visualization supports interactive zooming through `d3.zoom`, applying the zoom transform to the map group.

SSamSlotemaker

80% match

Loading thumbnail…

Plotting points backup

This example displays parking location data as red dots on a map of Dutch municipalities, sourced from the RDW open data API. The map uses a Mercator projection with `d3.geoPath` to render the TopoJSON boundaries. Parking coordinates are extracted from the API’s geometry field, filtered, and plotted as small circles on the SVG. The visualization supports zooming via d3-zoom and includes interactive hover effects on the municipality paths.

Mmbergevoet

79% match

Loading thumbnail…

Plotting points test

This visualization plots geographic points from Dutch parking data onto a map of municipalities. The code uses d3.geoMercator projection and d3.geoPath to render the map from TopoJSON data, while fetching point coordinates from an RDW Open Data API. Circles are drawn in red for each location, using projection to convert longitude and latitude into SVG coordinates. The map inherits municipal boundaries from the cartomap.github.io TopoJSON source with hover fill transitions.

Mmbergevoet

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

78% match