Rainbow Worm

100%

✓ Published0🌍 Public

Last edited Oct 4, 2018

Created on Oct 4, 2018

A rainbow-colored, segmented worm undulates across a dark background. The animation continuously reshapes the sine wave path, with each segment’s hue mapped from its horizontal position via an HSL color scale. Built with D3.js v3, the visualization uses SVG paths and a timer-driven update loop. The code manually computes thick, joined strokes for each quad of points, with width and color varying by segment, recreating the peristaltic motion from the original Protovis example.

AI-generated description

A recreation of an earlier Protovis example, reminiscent of peristalsis.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4165404'>Rainbow Worm</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Rainbow Worm

A rainbow-colored worm undulates across a dark field, its sinusoidal body shifting with a peristaltic motion. The animation renders the worm as a sequence of thick path segments, each filled with a hue from the HSL color space based on its position. The code uses D3 v3 to compute and update the paths, with the `d3.timer` driving the animation. The lineJoin function calculates the stroke outlines to create a continuous, tube-like shape that varies in thickness and color as it moves.

Mmbostock

92% match

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

74% match

Loading thumbnail…

Rainbow spinner #2

This example displays a continuously rotating rainbow ring on a canvas, with a white gap that stretches and shrinks as the animation cycles. The code uses d3.arc with a canvas 2D context to draw 181 colored segments, each filled and stroked with d3.interpolateRainbow. A d3.timer drives the rotation by updating an angle offset, while d3.select transition with a custom tween on "angle" alternately stretches the start or end edge of the gap, creating a rhythmic pulsing effect.

FFrissAnalytics

73% match

Loading thumbnail…

Worm-5

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.

YYiorgos Bagakis

73% match

Loading thumbnail…

Rainbow spinner

Animated SVG loading spinner renders 181 rainbow-colored arc segments using D3's `d3.arc` and `d3.interpolateRainbow`. The 960×500 canvas orbits the spinner around its center via `d3.timer`, while a clip path continuously stretches a plain arc's angle using `transition.attrTween`, alternating between expanding and contracting to mimic an Android-style loader.

FFrissAnalytics

72% match

Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Mmbostock

70% match

Loading thumbnail…

Rainbow Circle

A rainbow ring is constructed from 500 individual SVG path segments, each an arc slice that together form a circular band. The color of each slice encodes its angular position via the HSL color space, creating a smooth spectral gradient around the circle. The example uses D3 v3’s `d3.svg.arc` to generate the path geometries and `d3.hsl` to compute fill colors, with segment angles derived from a range over 2π radians. The rendering is entirely SVG, placed within a 960 by 960 pixel viewport.

Mmbostock

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

69% match