aaron.00366@gmail.com

@aaron00366·6 public vizzes

Fork of HTML Starter d3

This example does not display any visualization. It is a minimal HTML starter project that defines a two-element array (`['A', 'B']`) and logs the first element to the browser console. The page renders no graphical output; instead, the accompanying `styles.css` sets a large, centered font size for a `.message` class that is never used in the HTML. The code uses no D3 or other charting libraries, and it only demonstrates basic JavaScript array access within a simple HTML document structure.

Sep 4, 2025

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction by D3 2

A D3.js reproduction of a Sol LeWitt drawing fills the browser viewport with a grid of horizontal and vertical bars layered on top of each other. Two SVG masks, each containing differently shaped symbols from `d3.symbol` and `symbols`, selectively reveal parts of the grid. The first mask applies a non-inverted pattern, while the second uses an inverted fill, creating a dynamic interplay between the geometric bars and symbol silhouettes. Rendered entirely with SVG elements and styled through CSS, the code uses `select`, `range`, and `join` to generate the repeating bars.

Sep 4, 2025

Loading thumbnail…

Fork of Sol LeWitt Reproduction by D3 2

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.9.0. It creates a grid of overlapping horizontal and vertical rectangles, then applies two SVG masks to shape the composition: a star-shaped mask centered on the canvas and a circular mask with a black hole. The result shows a dense striped pattern with clear geometric cutouts. The code builds the SVG via `d3.select`, generates repeated elements with `range`, and applies masks using `url(#...)` references, with the star drawn via `d3.symbol` and `symbols`.

Sep 4, 2025

Loading thumbnail…

Sol LeWitt Reproduction by D3

This example reproduces a Sol LeWitt–style drawing by layering horizontal and vertical striped rectangles in two circular masks to create an overlapping grid pattern. The visualization uses D3 selections to bind data from `d3.range` to SVG `rect` elements, with `<mask>` elements defining the visible circular regions. Rendered as an SVG, the code generates 100 horizontal and vertical bars at 20-pixel intervals, producing a minimal, geometric composition that changes with the browser window size.

Sep 4, 2025

Loading thumbnail…

Sol Lewitt reproduction

This example demonstrates the foundational construction of SVG graphics through JavaScript. It shows a single blue square rendered on an HTML page, created programmatically using the Document Object Model (DOM) API. The code first creates an SVG element with specified dimensions and a border, then appends a rectangle with set coordinates, size, and fill color using `createElementNS` and `setAttribute` methods. The example serves as a basic introduction to the SVG library's core functionality for positioning and styling shapes.

Sep 3, 2025

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering with a circle, a red line, and a black path. The shapes are drawn directly in the HTML markup using inline SVG elements within a 960x500 viewport. The code uses no JavaScript libraries, relying solely on native SVG attributes like `cx`, `cy`, `r`, and `d` for positioning and geometry. Static styling such as stroke color and width are applied via element attributes, while a separate stylesheet defines a class rule that is not currently used by any visible element.

Sep 2, 2025