ibaird6@gatech.edu

@IsaacB375·17 public vizzes

D3 Join Exploration Module

This example demonstrates D3’s data join pattern for dynamically updating SVG circles. An animated sine wave controls the number, position, and radius of circles, which are re-bound to the DOM every frame. The module uses `d3.selectAll` with the `.data()` and `.join()` methods to enter, update, and exit elements seamlessly. It also relies on `d3.range` to generate data, and runs via a `setInterval` loop at 60fps.

Sep 14, 2025

Loading thumbnail…

D3 Join Exploration Module

This example demonstrates a dynamic, animated scatter plot of circles whose positions and radii oscillate according to a sine wave over time. Using the D3.js v6 selection API (d3.select, d3.range, and the .join() method), it creates and updates SVG circles in a performant, declarative manner. The visualization runs at 60 frames per second via setInterval, continuously recomputing a dataset of 10 to 15 points and re-binding it to the circles to showcase the join operation’s ability to handle entering, updating, and exiting elements seamlessly.

Sep 14, 2025

Loading thumbnail…

D3 Join Exploration 2

This example demonstrates real-time animated data joins in a browser window. It uses D3’s `select` API to create an SVG canvas and repeatedly updates a dataset of circles via `setInterval`. The code explicitly exercises the `.join('circle')` method to bind new data to existing SVG circle elements, transitioning their `cx`, `cy`, and `r` attributes based on a sine wave function. The visualization shows smooth, continuous motion of circles while also varying their count (from 5 to 15) over time, all rendered as vector shapes. D3’s `range` utility generates the underlying numeric sequence for the dataset.

Sep 14, 2025

Loading thumbnail…

Jam session

A dynamic SVG animation renders a row of circles that slide vertically in a wave-like pattern. The number of circles oscillates between 5 and 15 over time, driven by a sine function. Using D3 v6, the code generates data with `range` and applies a data join with `selectAll` and `join('circle')` to update positions each animation frame. The `setInterval` callback updates the scene at 60 frames per second, shifting each circle's `cy` attribute based on its index and the current time.

Sep 14, 2025

Loading thumbnail…

JavaScript Arrays

This example demonstrates how JavaScript arrays can be manipulated using built-in methods like `range`, `forEach`, `map`, `filter`, `reduce`, and `sort`. It shows the transformation of data through console logging and object creation, highlighting operations such as filtering even numbers, mapping values to doubled pairs, and sorting entries by key. The code uses D3’s `ascending` function for sorting and relies on standard array methods to process and output data. The visualization is purely code-based, with no graphical rendering.

Sep 13, 2025

Loading thumbnail…

Sol Lewitt Variant Full

This example reproduces a Sol Lewitt-inspired drawing using layered horizontal and vertical striped rectangles, masked to create a central diamond-shaped cutout over a circular void. The visualization builds an SVG canvas with D3 selections, generating 100 strips in each direction and applying two distinct masks to shape the composition. The code relies on D3’s `range`, `select`, and `symbol` APIs, with masks defined via SVG elements and paths. No external data is used; the artwork emerges purely from algorithmic geometry and procedural rendering.

Sep 12, 2025

Loading thumbnail…

Sol Lewitt Variant with D3 with Groups

This interactive SVG artwork reproduces a Sol LeWitt-inspired geometric composition using D3.js. Two perpendicular sets of thin rectangular bars—one horizontal, one vertical—overlap across the full canvas, their visibility controlled by two circular masks in the center. The first mask isolates a white circle, revealing only the horizontal bars within it, while the second mask uses inverse logic to show vertical bars outside the circle. The code employs D3's `select` and `range` utilities to generate the bar arrays and `join('rect')` to efficiently create the SVG elements, with masks constructed directly via the DOM API.

Sep 12, 2025

Loading thumbnail…

Sol Lewitt Variant with D3

This example reproduces Sol Lewitt’s geometric wall drawing as an interactive SVG visualization. It displays a grid of alternating horizontal and vertical stripes, masked into two overlapping circular windows at the center of the canvas. Using D3 selections and data joins, the code generates 100 rectangles in each direction via `range(n)`. Two SVG masks with complementary black-and-white circles control which stripes appear inside each circle, creating a layered optical effect.

Sep 12, 2025

Loading thumbnail…

Sol Lewitt Variant self created

This interactive SVG reproduction of a Sol LeWitt wall drawing generates intersecting horizontal and vertical striped bands across the entire browser window. Using the Document API to create and append SVG elements, the code defines two masks—one with white circles on black, another with black circles on white—to selectively reveal the grid strokes. The rendering approach applies these masks to alternating 10-pixel-wide rectangles, producing overlapping circular patterns where the two color schemes intersect. The composition adapts dynamically to the viewport dimensions, with circles positioned at quarter and two-thirds width.

Sep 11, 2025

Loading thumbnail…

Sol Lewitt Variante

This example recreates a Sol LeWitt-inspired wall drawing as an interactive SVG visualization. The artwork shows a grid of thin horizontal and vertical lines that are visible only within two overlapping circular masks, creating a crosshatched pattern inside the circles against a blank background. The code uses plain JavaScript with the SVG DOM API, creating mask elements and hundreds of rect primitives programmatically. A black-filled mask with a white circle reveals the horizontal lines, while an inverted mask with a black circle reveals the vertical lines, demonstrating a simple yet effective clipping technique.

Sep 11, 2025

Loading thumbnail…

Sol lewitt vertical variant

This example renders a generative, minimalist composition inspired by Sol LeWitt. It displays a lattice of vertical and horizontal strips on a full-window SVG canvas, with the pattern revealed only inside a circular region at the center. The code builds the artwork by appending SVG `rect` elements and applies a circular mask using a dedicated SVG `mask` element. The visualization uses raw JavaScript and the DOM API to construct the SVG elements directly.

Sep 11, 2025

Loading thumbnail…

Sol Lett Reporduction

This example reproduces a Sol LeWitt–style drawing using native browser APIs. It renders a full-screen SVG canvas and draws a series of 100 vertical rectangles, each 10 pixels wide, evenly spaced at 20-pixel intervals across the viewport width. The code uses `document.createElementNS` to construct SVG `rect` elements and appends them directly to the document body, with dimensions derived from `window.innerWidth` and `innerHeight`. No external libraries are used; the visualization relies purely on vanilla JavaScript and SVG.

Sep 11, 2025

Loading thumbnail…

A reproduction of Sol Lett Art piece

This piece reproduces a Sol LeWitt painting as a single bold black polyline drawn across a white SVG canvas. The line bends through several angular segments, echoing LeWitt’s geometric, wall-drawing style. The visualization is built with a static SVG `<path>` element, using hardcoded coordinates to define the curve. No JavaScript libraries are used for rendering; the included script only demonstrates basic functions and logging, while the visual itself relies entirely on SVG’s native path API.

Sep 11, 2025

Loading thumbnail…

Fork of An approximation of a column chart

This fork shows a pseudo-scatterplot as an approximation of a column chart, rendered entirely in an HTML page with a large medieval-style text layout. The visualization uses D3.js to generate circles that are positioned and scaled to suggest vertical bars, with the chart’s data points represented as scattered dots. The code loads Google Fonts’ Uncial Antiqua for the heading, while the body and CSS handle basic styling. Despite including an `index.js` that logs a message, no active simulation or data-binding logic is present, leaving the visual as a static, exploratory sketch.

Sep 11, 2025

Loading thumbnail…

Line Chart

This line chart shows a jagged polyline connecting five points across a white canvas, with a single black stroke of 20-pixel width tracing an upward and downward path. The chart is rendered as static SVG markup directly in the HTML, using a `path` element with explicit coordinates and a `rect` background. No JavaScript libraries are involved; the example relies on raw SVG geometry and minimal CSS for text styling, with an unused `index.js` that merely logs a message.

Sep 10, 2025

Loading thumbnail…

An approximation of a bar chart

Five black rectangles of varying heights sit on a white background, approximating a simple bar chart. The chart uses raw SVG `rect` elements with hardcoded coordinates and dimensions, omitting axes, labels, and data binding. The page is a standalone HTML document with minimal styling, and no JavaScript visualizations run—the sole script logs a message to the console. This static arrangement conveys categorical values purely through geometric proportion.

Sep 10, 2025

Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals presents a pseudo scatterplot using hand-coded SVG primitives. It renders a series of overlapping black circles of uniform radius across a white background on a fixed 950x500 viewBox. The circles are placed at various coordinates to simulate a minimalist data distribution, though no actual data is loaded. The visualization relies solely on inline SVG elements, with no JavaScript libraries involved, as index.js only logs a greeting. The rendering approach is purely static, using SVG’s `circle` and `rect` elements for the chart and background.

Sep 10, 2025