D3 Marker Clustering

100%

D3 Marker Clustering - Shipwrecks

✓ Published0🌍 Public

Last edited Jul 23, 2018

Created on Jul 22, 2018

This visualization displays shipwreck locations as clustered markers on a zoomable map of the Atlantic coast. It combines a Mercator tile basemap (rendered in SVG) with a force-directed clustering algorithm that merges nearby markers into larger circles as the view zooms out, and splits them apart when zooming in. The cluster force is implemented in a custom module (d3-cluster.js) that extends D3's force simulation to absorb overlapping nodes into weighted aggregates, with circle sizes proportional to cluster member counts. An invisible SVG overlay uses D3's quadtree-based collide detection on canvas-rendered markers, which lets the visualization handle large datasets efficiently while preserving geographic context through d3-tile map tiles.

AI-generated description

A more practical geographic use of a clustering module than my initial demonstration.

Each shipwreck is represented with a circle 2 px in radius. Overlapping circles are combined and new centroids are calculated based on a weighted average of their areas. Because of the wandering centroid, the merger of larger circles can result in the clearing of a neighborhood around larger circles - this effect is most noticeable when combining thousands of circles.

Scroll to zoom in/out. Drag to pan.

I'm working on developing the clusterer a bit more, but you can find some initial documentation and source on github.

Shipwreck data hosted by ESRI here.

Similar vizzes

Loading thumbnail…

Untitled

This visualization combines an interactive map of shipwrecks with a force-based clustering algorithm to reveal spatial patterns in maritime losses. It overlays circles on an Ocean Basemap, with each circle representing a shipwreck; as users zoom, the circles coalesce into larger clusters labeled with their count of wrecks. The code uses D3 v5, d3-cluster, d3-tile, and d3.geoMercator for projection and tile loading, rendering the basemap as SVG images and the circles on a canvas via `ctx.arc`. The data comes from a `shipwrecks.csv` file, with zoom and pan handled through d3.zoom.

KKrishu

84% match

Loading thumbnail…

D3 Marker Clustering w/Unified Mercator & Tile

This example demonstrates a D3 marker clustering visualization that combines a Mercator projection with slippy-map-style tile loading. The map uses OSM tiles rendered from a unified Mercator projection, while markers are drawn on an SVG canvas. A custom force simulation, based on D3's force module, handles clustering by applying a collision force with an absorption rule: when two markers overlap, the larger one absorbs the smaller, growing in radius and count. The underlying tiles and markers stay synchronized through a unified projection and zoom transform, providing a smooth pan-and-zoom experience with dynamic marker merging.

Aandrew-reid

79% match

Loading thumbnail…

This visualization demonstrates marker clustering on a canvas using D3.js and a custom force simulation. Ten thousand randomly placed points collapse into clusters as the simulation runs, with overlapping circles merging into larger ones based on their weighted areas. The clustering behavior adapts to zoom level—when zooming, all nodes reset to their original positions and re-cluster at the new scale. The canvas is redrawn on each simulation tick, showing only active nodes, while the force layout uses a modified collision detection algorithm to merge nodes that overlap, creating a dynamic, zoom-responsive clustering effect.

Aandrew-reid

77% match

Loading thumbnail…

D3 Marker Clustering

This block demonstrates a marker clustering technique using a modified d3-force layout. The visualization renders 10,000 circles on a canvas, where overlapping markers merge into larger circles with area proportional to the combined weight of their children. As the user zooms, circle radii scale accordingly, and clusters display the count of merged nodes once sufficiently large. The `d3-cluster` module, a stripped-down variant of d3-force, powers the clustering logic, supporting custom accessors for x, y, radius, and area. The example uses Canvas for rendering and is licensed under MIT.

663anp3ca

73% match

Loading thumbnail…

ship

A ship icon follows a recorded hurricane path across an equirectangular map of the world, with its track animated as a colored line. The visualization uses D3 v3 with SVG and animation, loading ship coordinates from a CSV and world geography from TopoJSON. The path is drawn with a cardinal interpolation and a dasharray effect that animates the line's progress, while the ship icon moves along the route, changing color through a ColorBrewer YlOrRd quantile scale as it travels. A drop-shadow filter and graticule overlay enhance the visual presentation.

Aanojoual

67% match

Loading thumbnail…

via:geojson.io

This visualization maps ship locations from a GeoJSON FeatureCollection, plotting each vessel as a point on a geographic backdrop. It shows the spatial distribution of maritime traffic across various years, with each point encoded by coordinates and labeled with ship name and voyage date. The map is rendered using D3.js, leveraging `d3.geoPath` for map projection and `d3.forceSimulation` to adjust label or point placement, while the raw GeoJSON data is parsed directly. The visualization uses a Canvas-based rendering approach, with `getImageData` potentially used for pixel-level interactions or distance queries.

PPhilippe Rivière

67% match

Loading thumbnail…

ship4

This visualization animates ship routes on an equirectangular world map, tracing journeys as dashed red arcs between source and destination ports. The map displays land masses in gray with country boundaries outlined in white. Using a dataset of ship voyages, the animation cycles through 50 route pairs every 10 milliseconds, drawing each as a line with a stroke-dash animation that fades in and out over 2 seconds. Small circles mark the source and destination ports, fading in and out with the arcs. The visualization is built with D3 v3 and TopoJSON, rendering as SVG with animated transitions.

Aanojoual

67% match

Loading thumbnail…

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Mmbostock

66% match