Skip to main content
SimilarExport ZIP
100%

Fork of Episode 4: Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Uulrich.zhan@harmonie-mutuelle.fr
Last edited Feb 13, 2024
Created on Feb 13, 2024

This sunburst diagram reproduces a Sol LeWitt-inspired geometric composition, using D3’s hierarchical partition layout to divide a circle into colored arcs based on nested data values. The code explicitly uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG paths, with an ordinal color scale mapping interpolated rainbow hues to each branch. Data is a static flare hierarchy with two children, rendered with a user-selectable radius and optional padding. The visualization showcases how algorithmic drawing can emulate minimalist art, highlighting the direct mapping between data structure and visual form.

AI-generated description

Trying to reproduce a Sol LeWitt art piece using D3. Inspired by the original piece here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric artwork using D3.js v6 to generate a square divided into four quadrants, each filled with distinct linear patterns. The visualization uses SVG rendering with `d3.select` and `d3.range` to create hundreds of thin rectangular shapes, while SVG `<mask>` elements define the boundaries of each quadrant. Horizontal, vertical, and rotated line patterns are clipped within the masks, recreating LeWitt’s systematic, rule-based aesthetic. The code defines all layout parameters manually, including square positions and rotation transforms, producing a static, procedural homage to the original piece.

Xxani
84% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Mmkarnam.mahendra@gmail.com
83% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric artwork as a generative drawing in SVG. It divides the canvas into four quadrants, each rendered with a distinct pattern of thin rectangular bands, using masks to crop horizontal, vertical, and rotated line groups. The code relies on D3’s `select` and `range` functions to create 100 repeating rectangles per section, with each pattern defined by explicit SVG `mask` elements. Rectangles are positioned and rotated via attributes like `transform`, with dimensions fixed to the viewport.

SShitij Mathur
83% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, displaying a grid of overlapping horizontal and vertical stripes that form a circular pattern through SVG masks. The code uses `d3.select`, `d3.range`, and `join` operations to render 100 rect elements in each direction, with the stripes visible only through two circular mask regions. The first mask reveals alternating bands inside a white circle, while the second creates an inverse effect, producing a geometric interplay of lines. The rendering approach combines D3's data-join with native SVG mask and circle elements to achieve the Op-art style composition.

CCurran Kelleher
82% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This fork of a Sol LeWitt reproduction uses D3.js to generate an abstract geometric composition. The visualization displays a grid of alternating horizontal and vertical bars that overlap to create a dynamic pattern across the full browser window. It builds two layered sets of rectangles, each masked with a pattern derived from D3’s `symbol` API—one mask uses the standard symbol set, the other an inverted version. The `scaleBand` function positions the masks, while `select` and `join` manage SVG elements. The result mirrors LeWitt’s minimal, rule-based aesthetic using interactive vector graphics.

Xxscotta@yahoo.com
82% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using an SVG canvas. Four equal quadrants display distinct generative line patterns: horizontal bands in the top left, vertical lines in the top right, diagonal hatching in the bottom left, and a rotated diagonal grid in the bottom right, each confined by rectangular masks. The work uses D3 v6 to generate repeated rectangles via `selectAll("rect").join("rect")`, applying spatial transformations like `rotate(45)` and `translate(-100, 0)` to create geometric variations. The full browser window serves as the drawing surface, with each pattern built from 100 iterated shapes.

DDea Bardhoshi
82% match
Loading thumbnail…

Fork of Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical rectangles. The rectangles are masked by circles, creating an interlocking pattern where the horizontal bars show through a white circle and the vertical bars show through a black circle on a contrasting background. The code uses D3 selections and the `range` function to create 100 rectangles in each direction, applying SVG mask elements with rectangle and circle shapes. The visualization renders entirely in SVG, filling the browser window with the geometric composition.

DDilara Bozkurt
82% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This interactive visualization reproduces Sol LeWitt's geometric art using D3.js and raw SVG. It displays a grid of 100 gently wavy horizontal and vertical lines, each rendered in colors from D3's `scaleOrdinal` and `schemeCategory10`. Two circular SVG masks clip the intersecting line sets, creating two overlapping circle patterns in the center of the viewport. The code constructs SVG elements directly via `document.createElementNS` and uses D3 version 6.6.1 for color scaling.

CCurran Kelleher
82% match