D3-Fuse Demo

100%

✓ Published0🌍 Public

Last edited Dec 18, 2019

Created on Dec 18, 2019

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.

AI-generated description

Custering with D3-fuse demonstration.

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

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

81% match

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle

75% match

Loading thumbnail…

d3js workshop - circles

Three SVG circles sit in a row inside an 720x120 canvas, built with D3 v3’s selection and data-join pattern. The code defines a static dataset `[10, 20, 30]` and uses `append`, `attr`, and `style` to set each circle’s radius, vertical position, and horizontal offset based on its data value. A commented sequence demonstrates animated transitions: first changing fill color to red with a 2-second duration, then adding per-element delays, and finally combining color, radius, and vertical movement in one transition. All animation code remains inactive, showing only the initial static circles.

Aaduo122

74% match

Loading thumbnail…

Fork of Editor Demo

This example demonstrates an animated composition of circles and squares using D3.js, rendered via the `select`, `transition`, and `join` APIs. It displays a set of circles entering with a slow, staggered radial expansion, while squares grow from zero dimensions with a similar fade-in effect. Updates to element positions occur quickly with a linear ease, and exits shrink elements back to zero before removal. The visualization relies on explicit data arrays for circle and square positions, sizes, and colors, with a lavender background.

CCurran Kelleher

74% match

Loading thumbnail…

Merge Sites

This example simulates the merging of 300 randomly generated circles based on their size and proximity. It shows how smaller circles are absorbed into larger, overlapping ones, with the resulting combined circle repositioning to reflect the merged mass. The animation progresses in discrete steps, with circles fading out as they are subsumed, until only the largest remain. The code uses d3.v4's selection and transition APIs to animate SVG circle attributes, with the merge logic implemented as a custom iterative function.

PPhilippe Rivière

74% match

Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock

74% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles animate vertically in a sine wave across the screen, their positions updating every frame in a loop. Using D3 v6, the code demonstrates the `.join()` method to bind new data arrays to existing SVG circle elements, updating their `cx` and `cy` attributes. The animation runs via `setInterval`, and the source includes commented-out alternative approaches using `.enter()`, `.merge()`, and `.exit()` for comparison.

AAndre J Denais

74% match