Merge Sites

100%

✓ Published0🌍 Public

Last edited Dec 13, 2016

Created on Dec 13, 2016

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.

AI-generated description

In answer to a question on the d3 Slack channel #help

See also the simpler version in one move

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Merge Sites, One Move

Three hundred translucent blue circles, each with a random position and weight, collapse into larger circles through an iterative merge process. The animation shows weighted circles absorbing smaller overlapping neighbors, moving the center of mass as weights combine, until only non-overlapping circles remain. Built with d3.v4, the SVG circles transition their radius, position, and opacity over two seconds using `transition()`. The merge logic is custom JavaScript, repeatedly scanning for overlapping circles and combining their weights in a single pass, with absorbed circles fading out and being removed.

PPhilippe Rivière

89% match

Loading thumbnail…

Split circles animation

Three red dots transition into a field of one hundred smaller dots that collide and scatter before a subset is ejected off-screen, then the animation reverses. The cycle repeats continuously. Built with D3 v5 and SVG, the visualization uses the `d3.forceSimulation` API with a `collision` force to disperse the particles, and a custom `d3.transition` to animate the circles between keyframe states with easing and enter/exit transitions. The blue center point remains static, marking the origin for each merge and split.

PPatrick Wojda

75% match

Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

MMTR

74% match

Loading thumbnail…

rotating the circles

Three SVG circle groups swap positions and sizes in a looping rotation, with circles entering and exiting as the dataset cycles through three IDs. The animation uses D3 v4 selections with keyed data joins, `transition()` for staggered movement, and `attr("r")` to grow new circles from radius zero while shrinking departing ones. The example demonstrates D3’s enter, update, and exit pattern with data-driven `cy` coordinates and a one-second duration, all rendered in animated SVG within a minimal blockbuilder setup.

PPatrick Wojda

74% match

Loading thumbnail…

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.

11wheel

74% match

Loading thumbnail…

D3-Arrays - merge

A green sine wave of circles moves continuously across the screen, with each circle’s vertical position and radius oscillating over time. The animation uses D3 v7’s `line` generator to draw a connecting path behind the circles, while `selectAll` and `join` update both the path and circle elements. Circles are generated fresh each frame via a custom `makeData` function, with rendering handled through SVG and a `setInterval` timer that adjusts the wave’s amplitude.

Gg1g10

73% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

73% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles undulate in an animated sine-wave pattern, with positions and radii oscillating smoothly over time. The example demonstrates D3's selection and data-join mechanics by using `selectAll` and `join` to bind an array of generated data to SVG circle elements. Rendered in SVG, the animation updates every 100 milliseconds via `setInterval`, incrementing a phase variable to drive the motion. The code imports `select` and `range` from D3 v7, showing the modern `join` pattern as a concise replacement for the older `enter`/`merge` approach.

Aalexscott-untitled

73% match