Fork of Sol LeWitt w/ D3

100%

Fork of Sol LeWitt w/ D3

✓ Published0🌍 Public

Last edited May 7, 2022

Created on May 7, 2022

A grid of thin horizontal and vertical white lines is drawn across a black canvas, intersecting to form a dense woven pattern. Two circular masks selectively reveal the grid: one centered rectangle masks the horizontal lines, while an inverted mask reveals the vertical lines, creating a layered, offset visual effect reminiscent of Sol LeWitt’s geometric art. The example uses D3 v7’s `select`, `range`, `symbol`, and `symbols` APIs to generate the lines and SVG masks programmatically.

AI-generated description

Fork of html intro for purposes of following D3 Data Viz course

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3js 2

A grid of alternating horizontal and vertical black lines is masked so that only a circular area is visible. The example uses D3 v6 to generate SVG rectangles with `selectAll`, `data`, and `join`, and applies two SVG masks to invert the visibility pattern. `d3.range` creates the sequence for positioning, while masks define a central circle where lines appear or disappear.

Iinnocent thomas

93% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger

92% match

Loading thumbnail…

Fork of Sol LeWitt with d3js

This visualization generates a grid of horizontal and vertical SVG rectangles that collectively form a geometric pattern inspired by Sol LeWitt’s minimal art. The code uses d3’s `select` and `range` to create 100 lines in each direction, then applies two circular masks to reveal or hide portions of the grid, producing a layered, cross-shaped effect. The rendering relies on SVG masks and fills, with the viewport sized to the full window.

Iinnocent thomas

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno

92% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by rendering a grid of horizontal and vertical lines on an SVG canvas. The lines are masked to reveal a circular pattern, with the mask itself containing a defined symbol, creating an interplay between the geometric lines and the circular cutout. The visualization uses the D3 library, including its `select`, `range`, and `symbol` APIs, to generate the SVG elements and masks. It fills the entire browser window, with both horizontal and vertical lines each having a thickness of 10 pixels, spaced 20 pixels apart.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Ppeter@attachmentdivision.com

91% match