Cantor Set

100%

✓ Published0🌍 Public

Last edited Oct 26, 2019

Created on Oct 26, 2019

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.

AI-generated description

The Algae L-System rendered using React.

MIT Licensed

Similar vizzes

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

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

95% match

Loading thumbnail…

Cantor Set

The Cantor Set appears as a fractal ladder of horizontal black bars against a white background, with each successive row containing fewer and shorter segments. The visualization computes the set as an L-System using production rules (A→ABA, B→BBB), iterated eight times, and renders the result as SVG rectangles via React. D3’s `scaleBand` maps each symbol’s position and width, while a filter selects only A symbols for display. The code leverages React 16.10 and D3 v5, with ReactDOM rendering the final geometric pattern.

Sswvogt

94% match

Loading thumbnail…

Cantor Set

This visualization shows the Cantor set as a series of horizontal rows, with each row representing one iteration of the fractal’s construction. Black rectangles mark the remaining segments after repeatedly removing the middle third of each interval, while empty spaces show the removed portions. The code computes the set using an L-system with rules A→ABA and B→BBB, starting from the initial state "A" over eight iterations. D3 v4 scales (`d3.scaleBand`) position the rectangles in an SVG, and the rendering filters for the "A" symbols to draw the visible bars.

CCurran Kelleher

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

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

67% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Shapes

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js version 7, rendered as SVG in a React-free HTML page. It displays 100 horizontal and vertical barcode-like stripes that intersect with a row of alternating filled and unfilled symbol shapes (circles, crosses, diamonds, and others) generated via `d3.symbol` and `d3.symbols`. Two SVG masks (`mask-1` and `mask-2`) use inverted fill colors to selectively reveal or hide the stripes, creating a dynamic interlocking pattern across the full viewport width and height.

Aa0x0

67% match

Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

JJMeltzer92

66% match