Skip to main content
SimilarExport ZIP
100%

Worm-5

✓ Published0🌍 Public
YYiorgos Bagakis
Last edited Oct 29, 2022
Created on Oct 26, 2022

A growing chain of circles undulates across a violet background, its length and radius expanding over time. The animation uses a repeating interval to update a dataset, repositioning each circle along a sine wave while shifting its fill color from green toward darker tones. Built with D3 v7, the code generates data procedurally via `dataMaker.js` and renders SVG circles with chained `.join()` calls in `vizMaker.js`, applying animated attributes for x, y, radius, and fill. Strokes remain white for contrast.

AI-generated description

Using D3 version 7 while watching Episode 5 of Get it Right in Black & White.

Animated the circles and changed the colours. I refactored the code adn split into modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Blobbing Worms

Three layers of green, blue, and red worm-like particles wander across the screen, each layer merging into blobs through clipped radial-gradient circles. Closer particles appear brighter, with opacity increasing as they approach. The animation uses SimplexNoise for smooth, organic movement, while D3.js’s `distanceLimitedVoronoi` technique clips each circle to its Voronoi cell, creating the merging effect. Each layer is rendered as an SVG group, and d3.timer drives the animation loop.

KKcnarf
76% match
Loading thumbnail…

Fork of D3 Starter

A grid of fifteen circles undulates vertically and changes radius in a continuous sine-wave pattern, creating a flowing wave effect across the screen. Running on a timer that updates every 20 milliseconds, the animation redraws each circle's y-coordinate and radius based on a sine function. The code uses D3 v6’s `select`, `range`, and data joins with `join('circle')` to bind and update SVG circle elements, while the viewport-sized SVG fills the browser window.

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

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo
75% match
Loading thumbnail…

Fork of Sine Wave Circles

A D3.js animation renders a field of 100 white circles that oscillate vertically in a sine wave pattern across a black SVG canvas. Each circle's vertical position is calculated using the sine of its horizontal index divided by five, plus a time-based increment from the `d3.timer` callback, producing a smooth, continuous wave motion. The circles are evenly distributed horizontally based on the SVG width and sized proportionally. The example, a port of the P5.js Math Sine Wave, demonstrates D3's core selection and attribute-updating APIs, leveraging SVG circles as the primary rendering primitive for the animated visualization.

Jjmmoser7
75% match
Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping horizontal bands of blue, yellow, turquoise, and white circles undulate vertically across a blue background. Each band contains 50 circles whose vertical positions are driven by sine and cosine functions of time and circle index, creating wave-like patterns. The animation uses a `d3.timer` to update the `cy` attributes of SVG circles every frame, with each band offset using different amplitudes. The visualization is built with D3 v7 and renders through a dynamically created SVG element.

Mmuhuribiz
74% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
74% match
Loading thumbnail…

SynWurm

SynWurm generates an animated, colorful visual composition using D3.js. It displays a dynamic set of interconnected circles, lines, and rectangles that move and change size over time. The animation is driven by a timer that updates a continuously changing dataset. The SVG rendering uses `selectAll` and `join` to efficiently update the positions, sizes, and colors of these geometric elements, creating a fluid, evolving pattern. The code generates new data points using a sinusoidal function and D3's `range` utility, with color assigned via a random color generator.

Aadventuresenglish.info@gmail.com
74% match