D3 - Sol — VizHub

100%

D3 - Sol

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3d3d3 4

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.

GGusnaRWX

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

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

86% match

Loading thumbnail…

Sol LeWitt with D3

A reproduction of a Sol LeWitt wall drawing uses D3 selections to generate an SVG of layered horizontal and vertical bands. The code, using d3.select and svg.attr, builds a full-screen grid of colored rectangles that visually alternate within a circular mask. While several mask and rect creation routines are commented out, the active script sets up the SVG canvas and dimensions to recreate the geometric pattern. The piece relies primarily on D3's DOM manipulation capabilities rather than data binding or scales.

CChloe Ransom

86% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a full-screen SVG. It creates 100 horizontal and 100 vertical bars, each with a fill mask, layering them to form a grid. The masks use a circle to reveal a central disk, with the second mask inverting the effect. The piece uses D3's `select`, `range`, and `join` APIs to build the SVG elements and masks.

Gguts

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

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

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua

85% match