Periodex

100%

✓ Published0🌍 Public

Last edited Sep 12, 2016

Created on Sep 11, 2016

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.

AI-generated description

A radial visualization of the power-of-two rhythmic subdivisions that occur in music. The pattern is computed using an L-System and rendered with D3.

You can buy prints of this graphic.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/74cb4d255acf072633a2df0d9b9be7c3'>Radial Cantor Set</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2165268&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

mit Licensed

Similar vizzes

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

92% match

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

91% match

Loading thumbnail…

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.

VVarun Eranki

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

66% match

Loading thumbnail…

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel

65% match

Loading thumbnail…

Week of hours

A radial ring visualization displays 168 hours across five concentric weeks, with each arc segment colored by random value and shaded blue for nighttime hours or gold for daytime. The animation uses D3.js arc generators with randomized opacity scales to create a flickering effect. Interactive transparent overlay arcs reveal per-hour data on mouseover, while labeled axes mark 6:00 and 18:00 boundaries. The visualization relies on d3.svg.arc, linear color scales with RGB interpolation, and power opacity scaling.

PPatrick Wojda

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

63% match

Loading thumbnail…

circular barplot

This circular barplot visualizes the frequency of different music genres from a JSON dataset. Each genre is represented as a colored arc segment, with the radial length of each bar proportional to its quantity, and labels are rotated around the perimeter. Built with D3 v7, the visualization uses `d3.scaleBand` for angular positioning, `d3.scaleRadial` for bar lengths, and D3's `arc` function to draw the curved bars. The SVG output centers the chart with a donut-like hole and applies conditional text rotation for label readability.

PPLD3508A

62% match