Fork of Fork of Sol Lewwit D3 1

100%

Fork of Fork of Sol Lewwit D3 1

✓ Published1🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This visualization uses D3 version 7.8.4 with level selection and join operations to generate a grid of horizontal and vertical rectangles. The SVG canvas spans the browser window, and two masks create overlapping circular regions. In the first mask, a white circle over a black rectangle reveals horizontal bars, while the second mask uses inverted colors to expose vertical bars. The resulting composition shows intersecting striped patterns emerging from the circular cutouts.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005

91% match

Loading thumbnail…

Fork of Sol Lewwit D3

This visualization reinterprets Sol LeWitt’s geometric wall drawings using a grid of horizontal and vertical stripes. It renders 100 SVG rectangles in each direction across the full browser window, with the intersecting lines partially masked by a central circle. Built with React and D3 v7, it uses `select`, `range`, and `.join()` to generate the marks, while two SVG masks create the contrasting circular reveal. The code dynamically sizes the artwork to the viewport using `window.innerWidth` and `window.innerHeight`.

PPeiyang Li

90% match

Loading thumbnail…

Fork of advancement sol lewit

This visualization creates a geometric pattern of overlapping horizontal and vertical rectangles, masked by two circular regions that reveal different sections of the grid. The code uses D3 selections and data joins to generate 100 thin rectangles in each direction across the full viewport. Two SVG masks control visibility: the first shows a white circle on black, while the second inverts this pattern, producing an interplay of solid and empty forms inspired by Sol LeWitt's minimalist wall drawings.

HHéloïse Feldmann

89% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

89% match

Loading thumbnail…

Fork of Full Sol Lewitt Reproduction with D3

This visualization creates a grid of horizontal and vertical bars across the full browser window, using SVG masks to reveal d3 symbols (shapes) from the d3-shape module. It uses the `select`, `range`, `symbols`, and `symbol` functions from D3 v6 to generate a striped pattern with four distinct symbol types as mask cutouts. The code renders 100 rectangles in each orientation, with two masks applied to alternate between light and dark shading on the revealed shapes. The rendering adapts to the window’s dimensions and uses `join` to bind data to SVG elements.

Mmaximus2581

89% match

Loading thumbnail…

Fork of SolLeWitt - convert from VanillaJS to D3

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

JJun Alvarado

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian

88% match

Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

HHéloïse Feldmann

88% match