Skip to main content
SimilarExport ZIP
100%

Data Visualisation with D3 - Sol LeWitt (Vertical)

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

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.

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…

Sol_LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The stripes are masked by two overlapping circles, creating a circular intersection pattern that reveals and hides parts of the grid. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to define the visual effect. The artwork scales to the browser window, with masks controlling which stripes remain visible, echoing LeWitt’s geometric, systematic style.

Ffcordon@pin.upv.es
89% match
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
89% match
Loading thumbnail…

Sol LeWitt 5

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars overlaid with two SVG masks. The masks use D3 symbol shapes—such as circles, crosses, and diamonds—cut out in contrasting black-and-white patterns, which create intersecting geometric voids across the striped lines. The rendering is fully vector-based SVG, computed dynamically from 100 data points per axis via `d3.range` and styled through `svg.append("mask")` with `d3.symbol`. The code relies on D3 selections and joins to build the layered composition.

Jjisu9393@naver.com
87% match
Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js (v7) reproduction of Sol LeWitt’s Wall Drawing #370 uses SVG masks to create a circular viewing window. The code generates 100 horizontal and 100 vertical striped rectangles across the full canvas, with each set masked to reveal either a white circle on black or a black circle on white. The two masks are defined as `mask` and `mask2`, each containing a full-canvas rect and a 200-pixel-radius circle positioned at the center. The `select` and `range` APIs are used to construct the repeating rect elements via joins.

LLouis Astorg
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
87% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy
87% match
Loading thumbnail…

Sol Lewitt with D3

This example recreates a Sol LeWitt-inspired drawing by layering horizontal and vertical stripes within circular masks. The stripes are generated as SVG rectangles using D3's `select` and `range` utilities, with the `join` operator binding data to the DOM. Two SVG masks create contrasting circular windows: one reveals the grid inside a circle, the other creates an inverse ring effect. The visualization adapts to the full browser window, using the viewport dimensions for the canvas size, and renders entirely through SVG elements without a separate data source.

TTirth Trivedi
87% match