Radial Colors

100%

✓ Published0🌍 Public

Last edited Sep 14, 2016

Created on Sep 12, 2016

This radial visualization generates a circular patchwork of colored arcs by iterating a Lindenmayer system 20 times, starting from a single symbol and expanding it through string-rewriting rules. Each iteration produces a ring of segments, with arc angles determined by d3.scaleBand and radii mapped from the iteration count. The SVG paths are rendered using d3.arc, while colors derive from d3.schemeAccent via d3.scaleOrdinal. The pseudorandom pattern emerges from the L-system rules defined in the code, with data generated procedurally rather than sourced externally.

AI-generated description

Pseudorandom radial colors.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/bc13cef2fb697e15c64274b50f754454'>Periodex</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Radial Cantor Set

A radial visualization of the Cantor set, computed as an L-System with rules replacing "A" with "ABA" and "B" with "BBB" over eight iterations. The D3 v4 code renders each generated string as a series of arc segments using `d3.arc`, positioning them with `d3.scaleBand` for both angular and radial axes. Only symbols "A" are drawn as black arcs, arranged concentrically from the center outward, creating a fractal pattern. The SVG output is generated entirely through D3's data-binding and path generation APIs.

CCurran Kelleher

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

79% match

Loading thumbnail…

Radial Rendering of color with React

A radial visualization displays all 148 named CSS colors as a single ring of pie-arc segments, each filled with its corresponding hex value. Using React hooks to load the CSV dataset and D3’s `arc` generator, the code maps each color to an angular slice around a central point. The SVG rendering, driven by d3.csv and React’s `useState`/`useEffect`, presents the full color spectrum in a compact, circular layout.

Sshresthabhi

78% match

Loading thumbnail…

Rendering Data with React Radial Burst

This example renders the CSS named colors as a radial burst, with each color represented by an equal-sized arc emanating from the center of the canvas. It uses React for all UI and SVG element creation, while D3’s `csv` utility loads the data and its `pie` and `arc` functions compute the angular segments and path geometry. The visualization works by mapping each row of the dataset to a `<path>` element whose fill is the hexadecimal color value from the data, producing a full circular spectrum of the named colors.

Qqtrfx

77% match

Loading thumbnail…

Radial Moiré

A radial Moiré pattern emerges from alternating black and white arcs generated with d3.arc and d3.pie, rendered as SVG paths within a React component. The 3,000 data points are mapped to equal-value pie slices, creating concentric bands whose interference produces the glitchy visual effect. Because rendering relies on SVG, the result reveals quirks in how the SVG engine handles overlapping shapes at scale.

CCurran Kelleher

77% match

Loading thumbnail…

Radial Spray of CSS Named Colors & D3

A radial spray of CSS named colors fans outward from the center of an SVG canvas, with each color represented as a slice of a pie chart. The code uses React hooks to load the color data from a CSV file and D3's `pie` and `arc` functions to generate the paths, filling each path with its corresponding RGB hex value from the dataset. The visualization renders as a full circle of 148 color swatches, demonstrating the full CSS named color palette in a compact, circular layout.

Kkalmdown

77% match

Loading thumbnail…

radial-mask

The visualization generates eight panels of overlapping radial line paths, each pair rendered in cyan and magenta with a yellow overlay clipped by an SVG mask. It uses d3.lineRadial to create irregular, sine-modulated rings from random walk data. The masking technique isolates the intersection of two shapes, producing layered, hybrid forms. The animation is static but visually dynamic.

11wheel

76% match

Loading thumbnail…

Banded Arcs

Twenty evenly spaced banded arcs radiate from the center of an SVG canvas, forming a circular pattern of lightblue segments with dark outlines. Built with D3 v3, the example uses an ordinal scale with `rangeBands` to divide 2π radians into angular bands, then renders each arc via the `d3.svg.arc` generator. Each path spans half of its allocated band, leaving gaps between segments, with radii fixed near the canvas edge. The code generates a static visualization, drawing all arcs in a single SVG group.

Mmbostock

76% match