Skip to main content
SimilarExport ZIP
100%

Refactor of Sol LeWitt Reproduction with D3 - Different shape

✓ Published1🌍 Public
KKhanin Sisaengsuwanchai
Last edited May 16, 2023
Created on May 16, 2023

This visualization generates a grid of thin horizontal and vertical black lines overlaid on a canvas. The lines are selectively masked based on the position of a large circular shape, creating a pattern where the horizontal lines appear within the circle’s area and the vertical lines appear outside it. Built with D3.js, the code uses `select`, `range`, and `join` to create the line elements, while `symbols` and `symbol` define the mask’s geometric path. The SVG rendering sets the stroke color and width for the lines.

AI-generated description

An apporoximation of Javascript visualization using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Refactor of Sol LeWitt Reproduction with D3 - Different shape

This example reproduces a Sol LeWitt-style geometric drawing with a novel shape, using overlapping horizontal and vertical bars of varying blue shades. The composition is created with D3’s `select`, `range`, and `join` operations to generate SVG `rect` elements, while two SVG masks (`mask-1` and `mask-2`) apply contrasting black and white paths derived from D3’s `symbols` and `symbol` APIs to reveal the final pattern. The color palette is produced with `scaleSequential` and `interpolateBlues`, and the rendering is pure SVG.

KKhanin Sisaengsuwanchai
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - Different shape

This example recreates a Sol LeWitt-inspired drawing using D3 to generate a grid of thin horizontal and vertical bars. Two SVG masks, each containing a large star-shaped path created with the `d3.symbol` API, are applied to the grid so the bars remain visible only within the star’s silhouette. The first mask uses a black background with a white star, while the second inverts the pattern, producing contrasting filled and striped regions. The visualization is rendered entirely in SVG, with coordinates calculated from the window dimensions via D3’s `select` and `range`.

KKhanin Sisaengsuwanchai
87% match
Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt drawing using D3.js, displaying a grid of alternating horizontal and vertical black lines that form a circular pattern. It uses SVG masks with two complementary circular cutouts to create the intersecting line effect. The code leverages D3’s `select`, `range`, and `join` APIs to generate and bind 48 rectangles in each orientation, with each set masked to reveal only the portion inside or outside the circle.

Ttverdone
86% match
Loading thumbnail…

Sol LeWitt Reproduction more shapes with D3

This visualization reproduces a Sol LeWitt-style geometric composition using overlapping striped rectangles and mask-based shapes. A grid of horizontal and vertical bars is drawn with D3’s `select` and `range` methods, while two SVG masks create contrasting circular cutouts—one inverted—by combining black and white fills with a `symbol` path from the `symbols` array. The masks alternate the visibility of the stripes, producing an optical interaction of positive and negative space. The piece uses fixed window dimensions and renders entirely with SVG, mirroring the minimal aesthetic of the original artwork.

YYingkai Song
86% match
Loading thumbnail…

Refactored D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3 to generate a grid of horizontal and vertical stripes. It demonstrates how the `symbols` API creates a circular mask over two layered sets of rectangles, producing an interplay of striped patterns. The SVG is rendered full-window, and the code uses D3's `select`, `range`, `join`, and `attr` methods to construct the visualization. Two mask definitions alternate their inverted states to show how the same symbol can create positive and negative space.

CCameron Wehr
86% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts
86% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-style drawing using d3 and SVG. It shows a grid of thin black horizontal and vertical lines, arranged in bands, with a circular mask that reveals the lines in the center while hiding them elsewhere and a second mask that creates a central black circle outline. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes. The program reads the full browser window dimensions for its canvas and draws a 100-band grid, placing the circle masks at the screen’s center.

Gg1g10
86% match
Loading thumbnail…

Refactored Symbol Mask - D3 Version Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt drawing using D3.js. It renders two masks—one inverted—that apply overlapping patterns of thick vertical and horizontal lines across the full canvas. The lines are generated as SVG rectangles, with each set filtered through a different mask to create the geometric interplay. Built with D3 v6, it uses `d3.symbol`, `d3.range`, and `d3.select` to construct the SVG output dynamically.

EEdgar Cortez
86% match