Algae L-System

100%

Algae L-System

✓ Published2🌍 Public

Last edited Oct 26, 2019

Created on Oct 26, 2019

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.

AI-generated description

The Algae L-System.

MIT Licensed

Similar vizzes

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

71% match

Loading thumbnail…

Cantor Set

This visualization renders the Cantor set as an L-System, expanding the initial symbol "A" through eight iterations into a hierarchical string representation. Each generation appears as a horizontal band of black rectangles corresponding to the symbol "A," while "B" symbols remain empty, creating the familiar fractal’s self-similar gaps. Built with React and D3 v5, it uses `scaleBand` for positioning and sizing along both axes, with the width scale dynamically redomained per row. The SVG output is generated declaratively, mapping each valid symbol to a `<rect>` element within the React component tree.

CCurran Kelleher

71% match

Loading thumbnail…

Cantor Set

This example visualizes the Cantor Set as a grid of thin horizontal bars, showing how the set’s structure emerges from repeated subdivision. It is computed using an L-System with production rules applied over ten iterations, and rendered as SVG rectangles via React. The code uses d3’s `scaleBand` for positioning and `range` for iteration, with each rectangle colored or filtered based on the symbol `A`. The visualization highlights the classic fractal pattern of removing middle thirds, generated entirely through string rewriting and geometric mapping.

CCurran Kelleher

67% match

Loading thumbnail…

Cantor Set

This visualization renders the Cantor set, a fractal generated by an L-system with production rules A→AB and B→A, iterated 80 times. It displays each iteration as a horizontal band of SVG rectangles, where only segments corresponding to symbol 'A' are drawn, revealing the characteristic recursive pattern of gaps. The implementation combines React for declarative SVG rendering with D3.js utilities, using `d3.range` for iteration generation, `d3.scaleBand` for positioning and sizing, and the `reduce` method to flatten nested data structures.

CCurran Kelleher

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

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

65% match

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

65% match

Loading thumbnail…

React Starter

This example demonstrates a dense cluster of overlapping circles and line paths rendered within an SVG container, using React to generate the SVG elements. The visualization creates a chaotic, generative pattern by mapping over a fixed array of numbers, where each circle’s position and color are computed with `Math.random`, while path elements connect random coordinates. Built with React 16.10 and ReactDOM, the code renders directly to the DOM via `ReactDOM.render`, styling the SVG with a grey background. The approach highlights how React can dynamically produce SVG visualizations without external data sources.

NNita

64% match