Skip to main content
100%

d3-fuse Map

✓ Published0🌍 Public
Aandrew-reid
Last edited Aug 23, 2018
Created on Aug 23, 2018

This example demonstrates a custom d3-fuse layout that merges overlapping circles by area, applied to geographic data displayed on an OpenStreetMap tileset. The circles are positioned with a Mercator projection via the d3-slippy helper, which provides slippy-map-like panning and zooming. As circles overlap, larger nodes absorb smaller ones, aggregating their area, radius, and child node relationships recursively until no further merges occur. The visualization uses SVG for map rendering and canvas or SVG for the fused circles, highlighting the fusion algorithm’s behavior on clustered geographic points.

AI-generated description

This is a second demonstration of d3-fuse, a clustering library that allows the visual fusion of nodes that are overlapping.

See also this example.

Zooming will recalculate clusters while panning will simply move existing clusters.

The tile map is based on an as of yet experimental slippy map library for D3.

Similar vizzes

Loading thumbnail…

D3-fuse

Ten thousand circles with fixed radius are scattered randomly across a canvas, and overlapping circles merge into larger clusters while retaining a branching tree of their component nodes. The d3-fuse library, using a quadtree, repeatedly fuses overlapping nodes and adjusts the center of gravity of each cluster. Mouse-wheel zoom modifies the circle radii, causing the clustering to change dynamically. The visualization is rendered on a 2D canvas, with circle size and color encoding cluster area, and text labels displaying the count of merged nodes.

Aandrew-reid
84% match
Loading thumbnail…

D3-Fuse Demo

The D3-Fuse Demo shows a swarm of 1,200 circles merging into larger clusters as their radii grow and shrink in a repeating animation cycle. Circles with larger areas absorb smaller neighbors, and each merged group displays a color scaled by its final radius. The example uses the D3-Fuse plugin with d3.quadtree for spatial collision detection and d3.interval to trigger periodic rescaling, while SVG circle transitions animate positions and sizes via the parent cluster’s layout coordinates.

Aandrew-reid
81% match
Loading thumbnail…

D3-Fuse Clustering with pie charts

This visualization maps places of worship in London from OpenStreetMap data, using D3-Fuse clustering to aggregate nearby points into fused circular clusters. Each cluster is rendered as a pie chart on an SVG canvas, with slices encoding the proportion of religious denominations (e.g., Christian, Catholic, Anglican) within that cluster. The map uses a geographic projection to place clusters over the city, while D3's quadtree algorithm efficiently merges overlapping nodes based on their spatial proximity and size. Hovering or interacting with a cluster reveals its internal composition, making it easy to explore the religious distribution across different areas of London. The visualization combines SVG for the base map and vector shapes with canvas for optimized rendering of the many clustered points.

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

Fork of d3.js with leaflet.js

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

SSteve_Nashon
73% match
Loading thumbnail…

d3.js with leaflet.js

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

Dd3noob
72% match
Loading thumbnail…

Fork of Circles with D3

This example shows a collection of overlapping circles arranged on a light green background, each with distinct positions, radii, and vivid fill colors. It demonstrates how D3’s data join and method chaining bind an array of circle objects to SVG elements, setting their center coordinates, radius, and fill via attribute accessors. The visualization uses the `select`, `selectAll`, `data`, and `join` methods to manage the DOM, with a fixed dataset defined in code rather than loaded from an external source.

HHagar E
72% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates a D3.js data join that renders a set of circles onto an SVG canvas, each positioned and styled according to attributes in a hardcoded data array. The code uses `select`, `attr`, and `join` to bind data to circle elements and set their `cx`, `cy`, `r`, and `fill` properties. It also loads TopoJSON country boundary data via `d3.json` and `topojson.feature` for an India map layer, though that map is not yet drawn. The visualization shows a simple, colorful scatter of overlapping circles on a light background.

NNita
71% match