Sam de Man

@Vuurvos1·3 public vizzes

Hex Map

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.

Nov 9, 2020

Loading thumbnail…

Hex map

This example renders a map of the world as a hexagonal grid using the `d3-hexgrid` library. The SVG output shows continents and country boundaries formed by hexagons, with a color scale distinguishing land from water. The visualization is built with React and uses D3’s hexbin mapping to project geographic coordinates onto hexagon cells, creating a stylized, low-resolution representation of global geography. The code initializes a 1960x800 SVG canvas and loads the hexgrid library via a CDN.

Nov 2, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates an interactive map of Dutch municipalities, with each region rendered as a clickable SVG path. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the map from TopoJSON data fetched via `d3.json`. Users can zoom and pan the map through the `d3.zoom` behavior, while clicking a municipality triggers a placeholder handler. The map loads municipal boundaries from cartomap.github.io, and the code includes a structure for resetting the view and adding tooltips with municipality names.

Nov 2, 2020