Plotting points test

100%

Plotting points test

✓ Published2🌍 Public

Last edited Nov 9, 2020

Created on Nov 5, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

79% match