Cantor Set

100%

✓ Published0🌍 Public

Last edited Sep 10, 2016

Created on Sep 10, 2016

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.

AI-generated description

The Cantor Set computed as an L-System and rendered using D3.

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

fractal

This interactive SVG visualization generates a branching tree fractal composed of circles. Mouse position controls the number of recursive iterations (left-right) and the branch angle (up-down). The code builds a fractal structure recursively, then renders it by updating SVG `<circle>` elements using D3 v4’s selectors and data-merging API. A text element displays the live count of circle elements, illustrating how animation lag increases with element count. The example highlights the performance limits of SVG rendering at scale.

CCurran Kelleher

66% match

Loading thumbnail…

Fractal Pie Chart Art

This visualization shows a recursive fractal pattern composed of nested pie chart slices, where each slice is subdivided into smaller slices until reaching a minimum size. The code uses D3 v4 with the d3-component library to create reusable components for slices, connectors, and the recursive fractal group. The pie layout uses d3.pie with custom start and end angles, while d3.arc renders each path. Child radii are calculated based on slice area ratios, and connectors draw stems between parent and child arcs. The generated data follows a fixed ratio hierarchy, rendered as SVG in a single viewport.

CCurran Kelleher

66% match

Loading thumbnail…

fractal

This example shows an interactive tree fractal that branches recursively into hundreds of thousands of circles, with the mouse position controlling the number of branches and their angle. The visualization responds to mouse movement by recalculating the fractal structure and re-rendering the SVG circles. The code uses D3 v4’s `selectAll` and `data` binding with an enter/merge pattern, but omits the `exit()` call, leaving obsolete circles in the DOM. Rendering relies on SVG `circle` elements positioned via `cx`, `cy`, and `r` attributes.

CCurran Kelleher

64% match