Split circles animation

100%

Split circles animation

✓ Published0🌍 Public

Last edited Sep 2, 2019

Created on Aug 30, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Dots

A force-directed simulation scatters and repels 300 small circles within a square field, with each new dot entering at the center and easing outward through an animated radius transition. The code uses the `d3.layout.force` API for physics, appends `circle` elements to an SVG canvas, and triggers a `transition` with a `Math.sqrt` easing function. Data points are generated procedurally with random offsets, and the simulation stops once the node count exceeds 300.

Mmbostock

81% match

Loading thumbnail…

Collision Radius Transition

A collision-radius transition uses the d3.forceSimulation API to animate 100 circles of varying radii toward the center of a 400x400 SVG canvas. Forces include d3.forceX, d3.forceY, d3.forceCenter, and d3.forceCollide, which pushes overlapping nodes apart. Clicking the “grow” or “shrink” buttons triggers a transition on the fifth circle, interpolating its radius via d3.interpolate and restarting the force simulation to rebalance the layout.

FFrissAnalytics

78% match

Loading thumbnail…

d3 | force grouping via events

Nine circles colored by group move smoothly between a merged state and two distinct clusters using d3-force. Clicking SPLIT applies a horizontal force anchoring group “one” at x=200 and group “two” at x=700, while JOIN resets the force to center the entire set. Circle sizes are scaled by a value attribute, and the collision force prevents overlap during transitions.

663anp3ca

77% match

Loading thumbnail…

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

NNita

77% match

Loading thumbnail…

no overlap circles one axis

Seven dark circles all start at the vertical center of a small SVG canvas. A custom force function pins each circle’s x-coordinate to the middle of the frame while clamping its y-coordinate within the bounds. The d3.forceSimulation API applies a repulsive `forceManyBody` force, causing the dots to spread vertically into a column. After 100 ticks, a second set of red circles is drawn over the final positions, showing the result with faint overlaps.

PPatrick Wojda

77% match

Loading thumbnail…

Force Transition

A force-directed simulation arranges 100 circles into two distinct clusters, which switch positions when a button is clicked. The chart also includes a quantitative x-axis, making the clusters' locations measurable. Built with D3 v4, it uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` forces; clicking toggles the strength of the two horizontal forces, causing the groups to slide and swap sides. The simulation is rendered as SVG and animated on each tick, with the source code compiled from ES6 using the Babel browser library.

FFrissAnalytics

77% match

Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323

77% match

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

76% match