Skip to main content
SimilarExport ZIP
100%

d3d3d3 4

✓ Published0🌍 Public
GGusnaRWX
Last edited Dec 29, 2023
Created on Dec 29, 2023

A sparse, full-window SVG canvas is created using D3, with the intention of reproducing a Sol LeWitt art piece. The example sets up the page dimensions and appends an empty SVG element to the body, but does not yet draw any shapes or lines. The code relies on D3’s `select` and `append` methods to handle the DOM structure, with the rendering approach being pure SVG output. The piece is presented as a starting point for visual iteration, referencing LeWitt’s conceptual style.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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

Full Sol LeWitt Reproduction with D3 Draft

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

AAndre J Denais
84% match
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
84% 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
83% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js to generate SVG shapes. It displays a grid of horizontal and vertical rectangles that are partially masked by overlapping circular regions, creating geometric intersections. The code constructs an SVG canvas sized to the browser window, then uses D3’s `select`, `append`, and `attr` methods to add and position the rectangles. Although the data array is currently empty, the logic prepares to map a sequence of marks with varying y-offsets and mask references, demonstrating how D3 can drive generative art through declarative joins and SVG masks.

Ssirenajbpearl@gmail.com
83% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 v6 with SVG rendering. It displays a grid of alternating horizontal and vertical black lines that become visible only within two overlapping circular regions, created through SVG mask elements. The code uses `d3.select` and `d3.range` to generate 100 line segments in each direction, with the masks defining the circular viewport. This demonstrates how D3 can combine basic shape generation with SVG mask operations to create geometric art based on LeWitt’s conceptual instructions.

GGbemiga Atolagbe
83% 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
83% match