Periodex

100%

✓ Published0🌍 Public

Last edited Oct 1, 2020

Created on Oct 1, 2020

Forked from Periodex

Periodex renders an L-system-generated sequence as a radial arc diagram. It shows how power-of-two rhythmic subdivisions accumulate over 50 iterations of the Algae production rules, with each generation mapped to a concentric ring. The visualization encodes the symbol A as a black arc segment, positioned by angle and radius. It uses React for the component structure, d3.scaleBand to map string indices to angular and radial ranges, and d3.arc with corner radius for the path geometry. The SVG output is centered on a 960×960 canvas.

AI-generated description

A radial visualization of the power-of-two rhythmic subdivisions that occur in music. The pattern is computed using a variant of the Algae L-System that subdivides into the powers-of-two subdivisions found in music with a 4/4 time signature.

MIT Licensed

Similar vizzes

Loading thumbnail…

Periodex

Periodex is a radial visualization that maps the power-of-two rhythmic subdivisions of a 4/4 time signature, generated by a variant of the Algae L-System that expands a starting symbol through twelve iterations. The visualization displays the resulting pattern as a series of black arcs radiating from the center, with each ring representing a successive iteration, where the presence of an arc indicates a note onset. The code uses React to render the SVG, d3.scaleBand to map iteration indices and symbol positions to polar coordinates, d3.arc for arc geometry, and d3.range to build the iteration sequence for the L-System's production rules.

CCurran Kelleher

94% match

Loading thumbnail…

Periodex

A radial visualization depicts the hierarchical power-of-two rhythmic subdivisions in a 4/4 time signature. Based on an L-System grammar, the pattern grows through twelve iterations, producing nested arcs that represent musical note values. The visualization uses React and D3 v5, specifically leveraging `d3.scaleBand` for angular and radial positioning, and `d3.arc` to render the SVG paths with rounded corners.

Ddavid-fon

88% match

Loading thumbnail…

Periodex

This visualization depicts the power-of-two rhythmic subdivisions found in music as a radial set of concentric arcs. Each ring represents one iteration of an L-System, with black arcs marking subdivisions that are present. The pattern is generated by repeatedly applying a string-rewriting rule to an initial state, and the resulting structure is drawn using D3.js’s `d3.scaleBand`, `d3.arc`, and SVG `path` elements, rendered on a 960×960 canvas.

CCurran Kelleher

85% match

Loading thumbnail…

Algae L-System

This example visualizes the growth of an Algae L-System over 16 iterations, where each row represents one iteration and each filled rectangle marks the position of the symbol "A" in the generated string. The visualization uses React to render an SVG, with d3.scaleBand mapping string indices to x-coordinates and iteration numbers to y-coordinates. The L-system rules (A becomes AB, B becomes A) are applied iteratively to generate the data, which grows exponentially in length.

CCurran Kelleher

71% match

Loading thumbnail…

Radial Colors

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.

CCurran Kelleher

69% match

Loading thumbnail…

Untitled

This visualization displays a radial, donut-like chart composed of eight concentric arcs, each representing a different data item stacked from a single-row dataset. The arcs are rendered using D3’s `arc` generator, with their inner and outer radii mapped through a linear scale (`scaleLinear`) to encode values, while the start and end angles are fixed to create a partial ring. The SVG is drawn in React, and the stacked data is computed with `d3.stack()`. Each arc segment is assigned a distinct color from a predefined array, producing a nested multi-layered ring visualization.

Ssubratanp

67% match

Loading thumbnail…

Ellipse

The visualization renders a grid of overlapping ellipse and circle shapes, composed through nested loops that map array indices to rotational transforms and RGB color values. Using React and SVG, the example constructs a repeating pattern where ellipses with swapped radii axes intersect with small circles, creating a layered geometric composition. The code leverages ReactDOM to render the SVG canvas, with randomized translation and rotation applied to each group, while the fill colors are derived from the loop index to produce a varied palette across the 10x10x10 iteration structure.

NNita

65% match

Loading thumbnail…

D3 Selection Exploration

This example presents an animated scatter plot and line chart driven by a sinusoidal wave. A set of circles and a connecting path update 60 times per second, with the number of points oscillating between five and fifteen and their vertical positions shifting over time. Built with React and D3.js, the code uses `d3.select`, `selectAll`, and `join` to bind data to SVG elements, while `d3.range` generates the sequence and `d3.lineGenerator` computes the path’s geometry. All rendering occurs in SVG with smooth, real-time animation.

SSubhendu Karmakar

65% match