100%

Sol LeWitt reproduction with D3

✓ Published0🌍 Public

Last edited Jul 8, 2022

Created on Jul 8, 2022

This example reproduces Sol LeWitt’s 1984 geometric wall drawing using D3.js. It renders a grid of sixteen semi-transparent colored rectangles that fill the entire browser viewport, arranged in four rows and four columns with a beige background. The code uses D3’s `select`, `.data()`, and `.join()` methods to bind the color data to SVG `<rect>` elements, computing each block’s position and size dynamically from `window.innerWidth` and `window.innerHeight`. Each rectangle’s fill color is drawn from a predefined array of sixteen named CSS colors.

AI-generated description

Homework for Episode 3: Sol LeWitt in Vanilla JavaScript.

My goal was to reproduce Sol LeWitt's work AXA Center, New York 1984.

MIT Licensed

Similar vizzes

Loading thumbnail…

Le04 Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3.js. It renders a grid of thin horizontal and vertical SVG rectangles across the full browser window, with each line colored by default. Two circular masks reveal the lines: the first shows a white circle over a black background, while the second inverts the effect, hiding the circle and showing the surrounding lines. The code uses `d3.select`, `d3.range`, and `selection.join` to bind data and create the rectangles.

CColin Frutschi

91% match

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3-Fork1

This reproduction of a Sol LeWitt artwork uses D3.js (v6) to draw a series of horizontal rectangles that fill the browser window. The piece shows a minimalist grid of 100 thin, full-width bars stacked vertically, each 10 pixels tall with 20-pixel spacing, rendered as SVG elements. The code leverages D3’s `select`, `range`, and `join` APIs to bind data to SVG `<rect>` elements, using the window’s inner dimensions to scale the artwork responsively. The rendering is pure SVG, with no external data source.

Rrajibbanerjee

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It shows a grid of horizontal and vertical striped rectangles intersecting over a central circular opening, created through two SVG mask layers. The code uses D3 selections, `data` binding with `range(n)`, and the `join('rect')` pattern to generate the marks. Each mask combines a full-size rect with a circle to reveal or hide portions of the grid. The rendering is done in SVG, sized to the full browser window.

AArvi

88% match