Skip to main content
SimilarExport ZIP
100%

D3 intro

✓ Published0🌍 Public
DDutch Hansen
Last edited May 30, 2023
Created on May 29, 2023

D3 intro reproduces a Sol LeWitt art piece by rendering 100 horizontal bars across the screen. D3 selections and the `join` pattern generate the rectangles using the `range` function. Two SVG masks, `circle-mask` and `circle-mask-2`, create a circular cutout through the bars while leaving the surrounding lines visible. The second mask applies a black circle to an otherwise white background, producing a negative space effect.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles
86% match
Loading thumbnail…

D3 Version Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using D3 v6 to generate dense horizontal and vertical striped patterns across the full viewport. Through two circular SVG masks, the code selectively reveals horizontal lines in one circular region and vertical lines in an overlapping area, creating a striking crosshatch effect. The rendering employs D3 selections with `range(n)` to generate 100 rectangular bars per axis, applying masks via `attr('mask', 'url(#circle-mask)')`. The piece demonstrates minimalist geometric abstraction through programmatic SVG construction.

EEdgar Cortez
86% 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
86% match
Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com
85% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered
84% 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
84% match
Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ
84% match
Loading thumbnail…

Sol LeWitt with D3

This example renders a minimalist, generative composition inspired by Sol LeWitt using D3.js. It draws one hundred horizontal rectangles stacked vertically, each with a fixed height and dynamic width, all clipped by a circular mask. The SVG output uses a black background rectangle inside the mask to reveal the bars only within the circle’s bounds. The code relies on D3’s `select`, `range`, and `join` methods to create the rectangles, demonstrating a simple data-driven approach to geometric art.

Llok noe
84% match