DouChinn

@DouChinn·3 public vizzes

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

Apr 6, 2023

Loading thumbnail…

Landcape

This piece reproduces a Sol LeWitt-inspired generative drawing by rendering two sets of overlapping perpendicular line groups on an SVG canvas. Vertical and horizontal bands alternate in visibility through the use of two mask definitions, creating a circular aperture that reveals or conceals each set. The artwork is generated procedurally with plain JavaScript, constructing SVG elements directly via the DOM API without external libraries. The fixed 100-line loop and mask logic produce a stark, grid-like landscape with a central circular disruption.

Mar 30, 2023

Loading thumbnail…

Fork of D3 Starter

A minimal demonstration of SVG primitives builds a stylized landscape with an animated sky gradient and a drifting sun. Two overlapping paths create layered hills in the foreground, while a radial gradient for the sky and linear gradients for the land transition between aliceblue, steelblue, and midnightblue. The D3 v7 `select` function appends a static text label, and inline SVG `<animate>` elements drive the color and position changes over a 10-second loop, showing how raw SVG and D3 can be combined for simple animated visuals.

Mar 27, 2023