so lewit reproduction D3.js fundamental

100%

so lewit reproduction D3.js fundamental

✓ Published2🌍 Public

Last edited Nov 23, 2022

Created on Nov 23, 2022

This example reproduces a Sol LeWitt–style drawing using D3.js. It generates a grid of horizontal and vertical rectangles, each masked to reveal a circular cutout at the center of the screen. The visualization uses D3’s `select`, `range`, and data joins to create 100 rects in each direction, with SVG masks (`url(#circle-mask)`) alternating black and white fills to control visibility. The code relies on D3 v7 and renders entirely as SVG, filling the full browser viewport with no external data.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 2

This example reproduces a Sol LeWitt-inspired drawing using D3.js v7, rendered as SVG. It displays two perpendicular sets of thin horizontal and vertical rectangles that form a dense grid over the full viewport. Two circular masks—created with `svg.append("mask")`, `symbol(symbolCircle)`, and inverted black-and-white fills—cut overlapping circular holes in the grid, revealing the background. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles per axis, with the `symbolCircle` path defining the mask shapes.

Ddeebanks77

94% match

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape

This visualization reproduces a Sol LeWitt-style drawing using D3.js v7. It renders horizontal and vertical striped rectangles that are masked to reveal a circle in the center, creating a clean geometric interplay between lines and a circular void. The SVG output uses two separate masked groups: the first applies a white mask with a black circle to horizontal bars, while the second uses an inverted mask for vertical bars. The code leverages D3’s `range`, `symbol`, and `symbolCircle` APIs to generate the shapes and masks programmatically.

Ddeebanks77

93% match

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js v7. It layers two sets of thin rectangles—one horizontal, one vertical—across the full viewport, creating a grid-like pattern. Two SVG masks, each containing a D3 symbol (a cross), selectively reveal or hide portions of the rects by applying alternating black and white fills. The code uses `d3.range` to generate data, `d3.symbol` with `symbolCross`, and `d3.select` to append elements and masks.

Ddeebanks77

91% match

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It renders a grid of alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

PPetrescu Alexandru

89% match

Loading thumbnail…

Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal bars that form a circular cutout in the center. The visualization shows 100 thin, full-width rectangles stacked vertically across the screen, with a circular mask applied to create a negative-space circle in the middle of the canvas. The code leverages D3’s `select`, `range`, and data-join methods to generate the SVG rectangles, while an SVG `<mask>` element containing a black rectangle and white circle defines the visible region. The rendering uses the D3 v7 library and outputs vector-based SVG graphics that fill the entire browser viewport.

PPrince Kumar

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher

89% match

Loading thumbnail…

SOL Lewitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.8.5, generating horizontal and vertical striped rectangles that form a grid pattern. A circular mask, created with SVG `mask` elements and inverted using a second mask, crops the intersecting lines to create a distinctive circular window in the center of the canvas. The code constructs the SVG and masks programmatically via the DOM API, appending 100 alternating horizontal and vertical rects. The visualization fills the entire browser viewport, using `window.innerWidth` and `window.innerHeight` to set the canvas dimensions.

DDonald Bagwell

89% match