Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
DDutch Hansen
Last edited May 30, 2023
Created on May 30, 2023

This example reproduces a Sol LeWitt art piece using D3, rendering nine circles in a sine-wave pattern across an SVG canvas sized to the browser window. The visualization shows how simple geometric elements can create an organic, rhythmic composition. It uses D3's `select` API to append an SVG element to the body and `selectAll('circle').data(data).enter()` to generate the circles, with positions calculated using the `Math.sin` function for the vertical offset. All drawing is done via SVG vector graphics.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It uses `select` to create an SVG canvas and `range` to generate data for drawing a grid: horizontal and vertical rectangles are appended with `.join('rect')`. Two SVG mask elements (`circle-mask` and `circle-mask-2`) reveal the grid through a central circular opening, with one mask inverting the other to create a contrasting effect. The visualization runs at full browser window size using D3 version 6.6.1.

JJeppeOEM
91% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 6.6.1, rendering directly to an SVG element. The visualization fills the entire browser window by setting the SVG dimensions to the screen width and height, and begins by drawing a single black circle at a fixed offset. The code imports `select` and `range` from D3, though only `select` is currently used to append the SVG and circle, leaving the artwork's full structure incomplete. The rendering approach relies on basic SVG primitives within an HTML page that hides scrollbars for a clean, full-screen presentation.

Aaissatheprogrammer
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3, rendering 100 horizontal and 100 vertical rectangles that intersect in a grid-like pattern. The visualization shows a central circular area where the rectangles are visible, while the surrounding regions are masked out. It uses d3.select to create an SVG, d3.range with data joins to generate the rectangles, and SVG mask elements with circles to create the circular cutout effect. The code iterates through both orientations to layer the marks.

Aaalyousfi
90% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Bbtlhgboy@icloud.com
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69
89% match