Jeya Balaji Balasubramanian

@jeyabbalas·2 public vizzes

Sol LeWitt in D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of thin black vertical and horizontal lines that intersect within a circular central region. Lines outside a 200-pixel-radius circle are masked out, while a second mask inverts the effect so vertical lines appear only in the periphery and horizontal lines appear only in the center. The code builds SVG elements with D3 selections and the `join` pattern, using `d3.range` to generate data and SVG `<mask>` elements to control visibility. The visualization fills the entire browser window and renders exclusively with vector graphics.

Jan 25, 2023

Loading thumbnail…

Sol LeWitt

This visualization recreates a Sol LeWitt-inspired geometric drawing using pure SVG. It shows a grid of vertical and horizontal black lines intersecting across the full screen, but with their density inverted between the center and the periphery. In the middle, only horizontal lines appear in a circular region, while vertical lines dominate the surrounding area. The effect is achieved using two SVG masks—a peripheral mask and a center mask—that selectively reveal or hide the line sets. The code uses the native `document.createElementNS` API to construct SVG elements dynamically.

Jan 25, 2023