marc.chatton@outlook.com

@AllenNight·6 public vizzes

Sol lewitt in d3 after consolidation

This example reproduces Sol LeWitt’s geometric wall drawings using D3.js with an SVG rendering. It draws a grid of black horizontal and vertical rectangles, then applies two masks—one normal and one inverted—to selectively reveal or hide parts of the lines. The masks use d3.symbol and d3.symbols to create white or black shape cutouts positioned across the canvas. The code relies on d3.select, d3.range, and d3.join to bind data and construct the SVG elements dynamically.

Jan 8, 2026

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering with circles, rectangles, lines, and paths drawn directly in an HTML document. The static visualization uses the SVG API's native elements, including `<circle>`, `<rect>`, `<line>`, and `<path>`, with explicit coordinates and styling attributes for fill, stroke, and stroke-width. The code includes a script that logs the document body to the console. No data or external libraries are involved, as the rendering relies entirely on the browser's built-in SVG support.

Jan 7, 2026

Loading thumbnail…

Fork of Double Harmonic

A fork of the "Double Harmonic" example animates a small black circle tracing a complex path composed of two overlapping circular motions. The code uses D3 v6 selections and joins to render and update SVG elements every 50 milliseconds, calculating the circle's position with sine and cosine functions driven by two radii and a time step. It draws the path as two connected lines from the center to the ball, while a larger blue shadow circle marks the moving point. This visualizes parametric motion and harmonic oscillation in an abstract, looping animation.

Jan 7, 2026

Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3’s selection and data-join mechanisms by animating a set of circles whose count, positions, and radii oscillate over time. It renders in SVG, updating every frame via `setInterval`, and uses `d3.select`, `d3.range`, and the `selection.join()` method to bind changing array data to circle elements. The motion follows sine waves, producing a rhythmic, fluid visual. The code relies on D3 v6, with no external data source or interaction.

Jan 7, 2026

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using overlapping horizontal and vertical stripes that intersect within two circular masks. It renders 100 thin rectangles per direction across the full viewport, with the first mask revealing the horizontal set as a white circle on black, and the second mask revealing the vertical set as a black circle on white. Built with D3 v6, the code uses `select`, `range`, and `join` to generate SVG `<rect>` elements, while mask definitions control visibility. The result shows two concentric circular zones of striped patterns against a plain background.

Jan 6, 2026

Loading thumbnail…

API DOM

This example displays a full-screen abstract pattern of 100 horizontal and 100 vertical SVG rectangles, layered to create a grid. A white circular mask is applied to the horizontal bars, cropping them within a centered ring while the vertical bars span the entire viewport. The visualization is built entirely with the SVG DOM API, using `document.createElementNS` to construct each rect, mask, and circle, and relies on `window.innerWidth` and `window.innerHeight` to size the canvas. The code draws no explicit data, instead showcasing a programmatic composition inspired by a Sol LeWitt lesson.

Jan 6, 2026