Data Visualisation with D3 - Sol LeWitt

100%

Data Visualisation with D3 - Sol LeWitt

✓ Published1🌍 Public

Last edited Aug 31, 2022

Created on Aug 31, 2022

This example reproduces a Sol LeWitt wall drawing as a generative visualization. Using plain JavaScript and the SVG DOM API, it creates 100 vertical rectangular stripes that span the full height of the browser window, each with a fixed width of 10 pixels and spaced 20 pixels apart. The code dynamically appends SVG `<rect>` elements to a full-screen SVG canvas, with dimensions set to the viewport’s inner width and height. The result is a minimalist, repeating pattern that mirrors LeWitt’s instructional art, rendered entirely through `document.createElementNS` and `setAttribute` calls without external libraries.

AI-generated description

Sol Lewitt Reproduction [Sol LeWitt Art Piece] (https://en.wikipedia.org/wiki/Sol_LeWitt)

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualisation with D3 - Sol LeWitt (D3)

This example recreates a Sol LeWitt wall drawing using D3.js, rendering an SVG that fills the browser window. It uses D3 selections and method chaining to append an SVG element to the body and set its width and height based on the viewport. The artwork is built dynamically, with the D3 library loaded via a CDN and the logic imported from a separate JavaScript module. The code emphasizes the programmatic, rule-based nature of LeWitt’s work by using D3’s core APIs for element creation and attribute manipulation.

Vvivienho22

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

Data Visualisation with D3 - Sol LeWitt (Vertical)

This example reproduces a Sol LeWitt wall drawing using two overlapping masks: a central white circle on a black background, and a surrounding white rectangle with a black circular hole. A loop of 100 horizontal stripes fills the circle, while a second loop of 100 vertical stripes covers the rest of the canvas. The piece uses the SVG `mask` element and `createElementNS` to generate shapes directly, with no external data source. The result is a clean, generative art piece that mimics LeWitt’s geometric instruction-based style.

Vvivienho22

89% match

Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290

87% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 to generate intersecting horizontal and vertical SVG rectangles. A pair of SVG masks with circular cutouts reveal the lines only within two offset circles, creating an optical moiré pattern across the full viewport. The code uses `d3.select`, `d3.range`, and SVG `mask` elements, rendering 100 stripes in each direction with dimensions tied to `window.innerWidth` and `window.innerHeight`. The result is a precise, generative interpretation of LeWitt’s geometric style, driven entirely by D3’s data join and SVG primitives.

Nnpinta

87% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher

86% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Ccardoza-IPH

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

86% match