Rainbow Pack

100%

✓ Published0🌍 Public

Last edited Apr 23, 2020

Created on Mar 18, 2016

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.

AI-generated description

A quick test of d3-hierarchy’s new circle-packing layout.

gpl-3.0 Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Rainbow Circles I

A set of 99 concentric circles radiates from the center of an SVG canvas, each ring rendered in a randomly generated RGB color. The circles grow in 10-pixel increments, creating a vivid, rainbow-like target pattern. Built with React, the visualization uses functional components and props to map over a predefined array of radii, while the SVG `circle` element draws each stroke with a fixed width and no fill. The random color assignment per circle produces a unique, non-repeating palette across the full 960 by 500 pixel viewport.

NNita

77% match

Loading thumbnail…

Rainbow Circles

This example renders a series of concentric circles centered on an SVG canvas, with each circle’s radius increasing by a fixed pixel increment. The stroke color of every circle is randomly generated using the `rgb()` function with values between 0 and 250. Implemented in React with ReactDOM, the visualization maps an array of radius values to SVG `<circle>` elements, producing a multicolored, nested-ring pattern reminiscent of a rainbow.

NNita

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

77% match

Loading thumbnail…

Geodesic Rainbow

A glowing, rainbow-hued geodesic sphere rotates in space, its surface composed of triangular faces whose colors and edges shift continuously. An interactive slider adjusts the degree of subdivision, morphing the shape from a coarse icosahedron into a finely tessellated ball. Built with d3.geodesic and d3.geo.orthographic, the drawing renders to a Canvas context, with each face dynamically recolored via d3.hsl and rotated over time using d3.timer.

Mmbostock

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

75% match

Loading thumbnail…

Circular Layout (Raindrops)

A circular layout of raindrop-shaped paths radiates from the center, each filled with a shared linear gradient that shifts from pale blue to deep navy. A random size and radial distance are applied to each of the 358 shapes, creating a scattered, organic dispersion. Built with D3 v3 and SVG, the example constructs each raindrop using a custom path generator that calculates a circle with a pointed tail based on a size parameter. The transform attribute combines rotation and translation to position every drop around the circle.

Mmbostock

75% match

Loading thumbnail…

pack forever

A black background hosts a yellow-and-blue bubble chart that continuously grows as new circles are added every 295 milliseconds. The visualization shows a force-directed packing layout where each new circle pushes existing ones aside to make room. The code uses d3.forceSimulation with forceX, forceY, forceLink, and forceCollide to compute positions, while d3.pack and d3.stratify generate the initial layout from random data. Circles transition smoothly via d3 transitions in SVG, with sizes scaled by a d3.scaleLinear function.

FFrissAnalytics

74% match