peter@attachmentdivision.com

@attachmentdivision·12 public vizzes

Sol LeWitt Vanilla JavaScript

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Jan 5, 2023

Loading thumbnail…

Fork of Pentagon

A fork of a pentagon is drawn using D3 v5's SVG rendering. The visualization demonstrates a figure inspired by Tamara Munzner's "Visualization Analysis and Design," showing a geometric shape composed of five interconnected nodes. The code uses D3's force-directed simulation (d3.forceSimulation) to position the vertices dynamically, creating an interactive layout. The rendering outputs to an SVG canvas within an HTML page, with the graph's edges and nodes displayed as vector elements.

Jan 4, 2023

Loading thumbnail…

Simple_SolLettWittRecreation_no.json

This example uses D3 v7 to render a grid of 100 vertical and horizontal bar-shaped rectangles that intersect across the full viewport. A circular SVG mask, centered in the frame, reveals only the area inside its 200-pixel radius, while the surrounding bars remain hidden behind a white overlay rectangle. The code appends SVG elements via `select`, `append`, and `join`, and uses `range` to generate the data for each bar. The visualization demonstrates how SVG masks can selectively crop layered geometric compositions in real time.

Jan 4, 2023

Loading thumbnail…

Simple_SolLettWittRecreation

Two nested sets of d3-selected SVG rectangles form a subtle grid of vertical and horizontal lines, which is partially occluded by a circular mask. The entire composition is filled with a white overlay that uses the same circular mask, isolating the grid intersection in the center of the viewport. The code builds the 100 vertical and horizontal bars with `d3.range`, `selection.join`, and `selection.attr`, then applies a `<mask>` element with a centered circle to clip the background and horizontal lines against the vertical bars.

Jan 4, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using D3.js, rendering a grid of thin vertical and horizontal lines that are visible only within a circular area at the center of the canvas. The code first draws 100 vertical strips, then applies an SVG mask with a white circle to reveal only the central portion, and finally adds 100 horizontal strips masked the same way. It uses D3’s `select`, `range`, and element joins to generate the rectangles, with the mask defined as an SVG `<mask>` containing a `<circle>`. The rendering output is an SVG graphic sized to the full browser window.

Jan 4, 2023

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

A generative geometric composition mirrors a Sol LeWitt wall drawing, displaying a grid of horizontal and vertical striped rectangles on an SVG canvas. The primary visual effect is a circular white mask that reveals only the horizontal lines within its radius, while the vertical lines remain fully visible across the entire viewport. Built with D3 v6, the code uses `select`, `range`, and `join` to create 100 rectangles per axis, with `window.innerWidth` and `window.innerHeight` defining the responsive full-screen dimensions.

Jan 4, 2023

Loading thumbnail…

Fork of Sine Wave Circles

A row of 20 circles animates vertically to form a moving sine wave across the SVG canvas. Each circle’s y-position is computed from its index using the sine function, with time passed to the D3 timer shifting the phase. The code uses d3.select, range, and timer, along with Math.sin, to update the circle’s cy attribute on each tick. The circle radius is derived from the SVG width divided by the number of circles, and the stroke and fill use default black.

Jan 4, 2023

Loading thumbnail…

Fork of P5.js Example

This example demonstrates concentric circular targets drawn with varying shades of gray, each created by a series of overlapping ellipses. It shows how a reusable function, `drawTarget`, produces different visual patterns based on parameters for location, size, and number of rings. The sketch uses the P5.js library, specifically the `createCanvas`, `ellipse`, and `fill` functions, within the `setup` and `draw` lifecycle methods. It renders three targets positioned across the canvas, with the color of each ring derived from an arithmetic sequence based on the ring count.

Jan 4, 2023

Loading thumbnail…

Fork of JavaScript Basics

This fork of a JavaScript basics tutorial renders a blank SVG canvas using raw JavaScript and DOM methods. The code consists primarily of commented-out examples demonstrating variables, functions, objects, and loops, with only `console.log(document)` active. The visualization shows an empty 960×500 SVG element, with the current output limited to browser console inspection of the document object. The example serves as a static, interactive-free demonstration of JavaScript syntax fundamentals rather than a data-driven visualization.

Jan 4, 2023

Loading thumbnail…

Fork of Processing Starter with P5JS

This minimal P5JS program demonstrates a blank, SVG-exportable canvas. It uses the p5.js-svg library to render vector output, creating a 960 by 500 pixel drawing surface with a light gray background. The sketch initializes a single canvas in the `setup()` function and draws a uniform background in `draw()`. It is based on a CodePen starter template and a Processing recursion example, serving as a bare-bones foundation for further visualization development, with fixed full-viewport CSS styling.

Jan 4, 2023

Loading thumbnail…

HTML & CSS

This example shows a simple HTML page styled entirely with CSS, where a centered greeting and a message block appear against a gold background. The page uses a single `<div class="container">` to center the content, with the heading set to white and the message in dark gray via the `styles.css` rules. It relies on the reset-css stylesheet from unpkg and standard CSS properties like `font-size`, `text-align`, `line-height`, and `margin-top` to control typography and layout. No JavaScript or data is involved; the visualization is purely static markup and styles.

Jan 3, 2023

Loading thumbnail…

Bare Minimum HTML

This example shows the simplest possible valid HTML document, displaying a single “Hello HTML” heading in a browser. It uses no JavaScript, CSS, or external libraries, relying solely on the native HTML `<h1>` element inside a standard document structure. The page consists of a doctype declaration, a `<head>` with a title, and a `<body>` containing the heading, demonstrating the minimal skeleton required for any web page.

Jan 3, 2023