Periodex

100%

✓ Published0🌍 Public

Last edited Dec 1, 2020

Created on Dec 1, 2020

Forked from 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.

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

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

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

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

68% match

Loading thumbnail…

radial pie ex

A radial pie chart visualizes the distribution of music genres by artist gender and type, with each segment's arc length proportional to the total artist count. The visualization fetches artist data from an external JSON file, aggregates genres, and categorizes counts by gender (Male, Female), group, or unknown. Users can filter by country or adjust the number of displayed genres using a slider. Built with D3 v5 and React, it uses a custom `scaleRadial` for the radius, `scaleBand` for angles, and renders as an SVG.

AAtlasZen

68% 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…

Fork of Fork of reproduction of somethind 4th cell

This example shows a radial bar chart plotting five data series as concentric circular rings, with each series represented by a wedge extending from the center to a value on a 0–100 scale. The visualization uses D3.js version 7.8.4 to generate an SVG, employing `d3.lineRadial` with `curveLinearClosed` to create the series paths, `d3.scaleLinear` for the radius mapping, and SVG circles as grid levels. Axis labels are positioned using trigonometric calculations based on the angle slice for each series.

Rrwata97

66% match

Loading thumbnail…

radial pie ex

A radial pie chart displays the distribution of population by age group across U.S. states, using stacked arcs with a color scale for each age band. The visualization employs `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radius, and `d3.arc()` to render the SVG paths. Data from `data.csv` is loaded via `d3.csv` and processed with `d3.stack`, while state labels rotate around the outer ring based on their computed angle. A legend and circular gridlines with tick marks provide reference for the radial magnitude.

AAtlasZen

66% match