Skip to main content
SimilarExport ZIP
100%

Hex Map

✓ Published0🌍 Public
SSam de Man
Last edited Nov 9, 2020
Created on Nov 2, 2020

This visualization maps the Netherlands with a hexbin overlay that aggregates parking garage data, using color to represent point density and subtle strokes to delineate each hexagon. It displays city locations with population data as the geographic backdrop, while the hexgrid communicates the concentration of garage points across the region. Built with d3-hexgrid for the hexagonal tessellation, the code uses d3.geoMercator and d3.geoPath to project country boundaries from World Atlas TopoJSON, and d3.scaleSequential with an exponential interpolateViridis transform to encode density values. Point data is loaded from a JSON dataset containing garage specifications.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

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
78% 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
76% 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
75% 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
75% match
Loading thumbnail…

English

This map of the Netherlands shows population density per neighborhood (wijk) using a color scale, alongside train tracks and station locations. A Voronoi diagram highlights which station is closest to any given point. The visualization uses `d3.geoPath` and the `d3.geoAlbers` projection with zoom on click, while `d3.scaleThreshold` and `d3.schemeGnBu` define the choropleth. Hovering reveals neighborhood names, population, density, and average distance to a station. Data sources include CBS and NS, rendered as SVG with D3 v4.

JJulesBlm
74% 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
74% match
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
73% match
Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands highlights individual municipalities, rendered as SVG paths and colored dark with light strokes. The visualization uses `d3.geoPath` with a Mercator projection, and `d3.zoom` enables panning and zooming. Clicking a municipality triggers a smooth transition that fills the selected region in red and zooms in on its bounds. The geographic data comes from a TopoJSON file fetched from Cartomap, and the map animates using D3 transitions.

CChubby Racoon
73% match