Skip to main content
100%

D3-fuse

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

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.

AI-generated description

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

The branching tree on each node cluster shows the nodes that comprise that cluster based on node overlap. Due to a moving center of gravity between each step of the clustering process and radii of the clustered nodes, trees can extend slightly beyond the node disc.

This is an initial attempt at a clustering library that doesn't rely on d3-force, though the short code of d3-fuse is borrows considerably from d3.forceCollide.

In this demonstration the mouse wheel will simulate a zoom by increasing/decreasing circle radii.

Similar vizzes

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
86% match
Loading thumbnail…

d3-fuse Map

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.

Aandrew-reid
84% match
Loading thumbnail…

D3 Marker Clustering

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

d3-cluster

The example demonstrates d3-cluster, a layout that groups overlapping circles into clusters and highlights the merged boundaries. After rendering 500 randomly positioned circles with varied radii and colors, the code applies the cluster layout, which sorts points by size and detects overlaps to assign each circle to a cluster. The resulting visualization overlays new circles with a distinct orange stroke, where the stroke width reflects the number of overlapping points in each cluster. The implementation uses custom d3-cluster APIs like `.x()`, `.y()`, and `.radius()`, built with d3-scale, while the initial rendering relies on d3 selections and SVG circle elements.

PPhilippe Rivière
75% match
Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo
74% 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
74% match
Loading thumbnail…

Fork of Circles with D3

A scatter of overlapping circles with varied radii, positions, and bright fill colors sits on a pale green background, demonstrating the D3.js general update pattern. The visualization maps an array of circle data objects to SVG `<circle>` elements using `select`, `data`, and `join`, then sets `cx`, `cy`, `r`, `fill`, and `opacity` attributes via method chaining. The code measures the container’s client dimensions to size the SVG, and uses a reusable `main` function to support hot reloading. It highlights D3’s data-driven DOM manipulation with a simple, static composition.

Rrichard.adamson@hotmail.com
74% 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
74% match