Skip to main content
SimilarExport ZIP
100%

New filter and transform

✓ Published5🌍 Public
Mmbergevoet
Last edited Nov 24, 2020
Created on Nov 10, 2020

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

AI-generated description
MIT Licensed

Similar vizzes

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

New filter and transform

This example visualizes parking-related geographic data from the RDW open dataset, displaying points on a map of Dutch municipalities. The code fetches GeoJSON data, cleans and transforms it with custom utility functions, then renders circles using D3’s `geoMercator` projection and `geoPath`. It uses `d3.zoom` for pan and zoom interactions, while the base township boundaries come from a TopoJSON file, with hover effects styled via CSS transitions.

DDanny de Vries
91% 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
90% 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
86% match
Loading thumbnail…

Alternate version with checkboxes

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.

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

Plotting points test

This example visualizes parking lot data retrieved from the RDW Open Data API, plotting geographic points onto a map of Dutch municipalities. The map uses an SVG rendering with a Mercator projection, and the geographic boundaries are drawn from a TopoJSON file using `d3.geoPath`. The parking point coordinates are extracted from the API’s geometry text fields and displayed as circles on the map. The visualization incorporates `d3.zoom` for panning and zooming the view, allowing users to explore the spatial distribution of the plotted points.

GGijs Laarman
81% match