Circular Layout (Raindrops)

100%

Circular Layout (Raindrops)

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Mar 1, 2011

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Circular Layout

The example shows a circular pattern of 180 radial spokes, each containing ten small circles that recede and shift in color outward from the center, producing a sunburst-like mandala effect. It uses D3 v3 to generate the SVG structure, with each spoke rotated incrementally via `transform` attributes. Circle positions and fills are mapped linearly through `d3.scale.linear`, transitioning from brown to steelblue along a radius of 180 to 240 pixels. All shapes have black strokes, and the rendering relies on SVG elements created through data joins on `d3.range` values.

Mmbostock

78% match

Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Mmbostock

77% match

Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Mmbostock

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

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

74% match

Loading thumbnail…

Fork of Circular pattern of positioning circles with two distinct categories

This example visualizes a circular arrangement of lines radiating outward from a central point, with two distinct categories represented by different stroke colors. The visualization uses D3 v6 to generate 800 lines positioned randomly within a circular boundary, with each line extending 100 units from its starting point. The code calculates angles and coordinates using trigonometric functions, then renders the result as SVG elements with animation capability through D3 transitions. The rendering approach uses SVG line elements with opacity and stroke-width styling to create the circular pattern.

NNita

74% match

Loading thumbnail…

Concentric circles

A series of concentric circular paths renders as a layered, gradient-striped form against a rainbow background. Each of the one hundred paths is filled with a red-tinted color derived from its index, and random translations scatter them across the canvas. The visualization uses React with a custom SVG path component, applying a drop-shadow filter and scaling via the `transform` attribute.

NNita

74% match

Loading thumbnail…

Fork of Fork of Fork of Concentric circles -linear gradient

This visualization generates 50 concentric circles with random radii, radiating outward from the center of the canvas to explore the interplay of linear gradients and projected shapes. Each circle is broken into numerous small line segments that vary in stroke and fill color based on mathematical randomization. Pulsing paths are drawn using hard-coded SVG path data. Built with React and D3.js, the example uses D3's `d3.line` generator and SVG radial gradients to create a complex, layered composition on a green-to-black background.

NNita

73% match