Merge Sites, One Move

100%

Merge Sites, One Move

✓ Published0🌍 Public

Last edited Dec 13, 2016

Created on Dec 13, 2016

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.

AI-generated description

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

See the more complex version, with transitions for each step, at <a href='http://bl.ocks.org/Fil/1d045bf61b7184bafb3afd0b527473f6'>Merge Sites</a>.

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

76% 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

74% 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…

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

73% match

Loading thumbnail…

Circles Part2

Ten randomly placed light blue circles animate smoothly across the screen in a full-window SVG. The example uses React state to trigger a D3 v5 transition that shifts each circle horizontally; upon transition completion, new random x-coordinates are generated and the animation repeats. Data binding via `selectAll` and `join` keeps the circles synchronized with the changing state.

Mmbooch22

73% match

Loading thumbnail…

Gooey Effect

Sixty purple circles animate between a regular grid and a clustered circle, creating a smooth gooey merging effect. The transition is driven by an SVG filter using `feGaussianBlur` and `feColorMatrix`, with the blur values tweened via `transition.attrTween`. D3 v4’s `d3.forceSimulation` handles the clustering physics, while staggered `transition` delays on circle positions emphasize the organic flow. The effect alternates between the two states on a loop.

FFrissAnalytics

72% match

Loading thumbnail…

rotating the circles

Three colored circles continuously rotate through a sequence of colors, shifting left and right in two separate animated containers. One container shows a set of three overlapping circles, while the other displays a single circle that cycles through green, blue, and orange. Using D3 v4’s data joins and transitions, each circle’s size, position, and z-index animate over 400 milliseconds, with the enter and exit selections resizing elements to create a smooth, circular rotation effect.

PPatrick Wojda

72% match