Sol LeWitt in d3 v2

100%

Sol LeWitt in d3 v2

✓ Published1🌍 Public

Last edited Nov 6, 2023

Created on Nov 6, 2023

This example recreates Sol LeWitt's geometric wall drawings using D3 v5. It creates a grid of intersecting horizontal and vertical rectangles on an SVG canvas. Two SVG masks define a circular window, with one mask inverting the other, revealing the line intersections within the circle. The code uses D3's `select`, `range`, and data join operations to generate the 100 rect elements per axis, with dimensions tied to the browser window.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

Test Heading

test

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt in d3

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

TTobi Olabode

96% match

Loading thumbnail…

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

DDouChinn

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

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

92% match

Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell

92% match

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber

92% match

Loading thumbnail…

Sol LeWitt D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js and SVG masks. A grid of horizontal and vertical rectangles is clipped by two complementary circular masks, creating intersecting bands that reveal or hide lines in alternating regions. The visualization uses `d3.select`, `d3.range`, and `join` to generate the rectangles, with masks defined via SVG `mask` elements. The layout fills the browser window, and the code runs in a React environment with SVG rendering.

JJamie

92% match

Loading thumbnail…

D3 Sol LeWitt

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It renders a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, covering the full window. Two SVG masks define a central circular aperture: the first mask reveals horizontal stripes inside the circle, while the second reveals vertical stripes outside it, creating a contrasting geometric pattern. The code uses `d3.select`, `d3.range`, and chained `.attr` calls to generate the shapes, with data bounds derived from the window dimensions.

AArturo Guevara

91% match