Skip to main content
SimilarExport ZIP
100%

Data Visualisation with D3 - Sol LeWitt (D3)

✓ Published0🌍 Public
Vvivienho22
Last edited Aug 31, 2022
Created on Aug 31, 2022

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.

AI-generated description

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

<!-- this is how you create URLs -->
MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualisation with D3 - Sol LeWitt

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.

Vvivienho22
91% 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
89% match
Loading thumbnail…

D3 - Sol

This example reproduces a Sol LeWitt art piece as an interactive SVG drawing. It creates a full-screen canvas that fills the browser window, using D3 version 6.6.1 to select the body element and append an SVG with dimensions matching the viewport. The artwork is rendered dynamically, with the code importing only the `select` function from D3 to manage the SVG creation. The piece focuses on geometric form, translating LeWitt's conceptual wall drawings into a web-based medium.

FFilip Pavlove
88% 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
87% match
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
85% 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
85% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts
85% match
Loading thumbnail…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara
85% match