nreinig3@gatech.edu

@nreinig3·11 public vizzes

JS in HTML

This example demonstrates the most minimal possible integration of JavaScript with HTML, showing a page that renders the text "Hello HTML" and executes a JavaScript script that logs "Hello, JavaScript!" to the console. The code uses a plain HTML document with a `<script>` tag referencing an external `script.js` file, which contains a single `console.log` call. This serves as a foundational template for understanding how CSS and JavaScript can be embedded within web pages, and it provides a starting point for more complex React-based visualizations.

Dec 21, 2023

Loading thumbnail…

D3 Selection Exploration

This example demonstrates a minimal D3 setup using React. It creates an empty SVG element appended to the page body, showing how to initialize D3 selections alongside a React environment. The code imports the `select` function from D3 and applies it directly to the DOM, adding an SVG container without any visual content or data binding. The visualization leverages D3 version 7.8.5, with the rendering handled entirely by SVG, though no shapes or marks are drawn in this bare-bones exploration.

Dec 18, 2023

Loading thumbnail…

D3 Selection Exploration

This example demonstrates how D3’s `ascending` comparator can be used to sort an array of key-value pairs by their keys. The code defines a static dataset of three entries with keys A, C, and B, logs the original array, then logs the sorted result after applying `entries.sort((a, b) => ascending(a.key, b.key))`. The visualization is minimal, relying only on an HTML page with a large centered text message and no graphical rendering. It uses D3 version 7.8.5 within a React project, but the focus is purely on console-based data manipulation rather than visual output.

Dec 18, 2023

Loading thumbnail…

Fork of Hour 5

This example demonstrates client-side data processing with D3.js, displaying a hardcoded array of key-value pairs in the browser console. It shows how D3’s `ascending()` comparator is used within the `sort()` method to order entries alphabetically by their `key` field, producing a reordered sequence (A, B, C) from the initial unsorted list. The visualization itself is minimal, consisting of a large “Hello HTML!” message styled via CSS, while the actual algorithmic behavior is observable only through the console output. The code relies on the D3 library (v7.8.5) and standard JavaScript array methods, with no rendering to the canvas or SVG.

Dec 18, 2023

Loading thumbnail…

D3 Selection Exploration

Dec 18, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates the JavaScript `Array` API and the behavior of the `push` method, specifically how a function named `range` initializes an array with a single element, `0`, and returns it. The visualization, which is purely code-based without any graphical output, uses the standard JavaScript runtime and console logging to display the result of calling `range(5)`. It shows the creation of an array literal, the `push` operation, and the commented-out example of adding a third element to a separate array. The code relies on the built-in `console.log` function to output the arrays to the developer console.

Dec 16, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction Using D3

This example recreates Sol LeWitt’s geometric wall drawings using D3 and React, rendering an SVG that fills the browser window. It draws 100 horizontal striped rectangles, each 10 pixels tall and spaced 20 pixels apart, with a circular mask applied to clip the pattern into a central disc. The code relies on D3’s `select` to build the SVG and mask elements, while width and height derive from `window.innerWidth` and `window.innerHeight`. The approach echoes LeWitt’s instructions-based art, translating his algorithmic rules into generative code.

Dec 7, 2023

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using only raw SVG and JavaScript. It shows a vertical stack of 100 horizontal rectangles whose visibility is restricted to a circular region centered on the screen. The code creates an SVG via the DOM API, defines a `<mask>` with a white background and a black circle, and applies that mask to each yellow rectangle. The result is a crisp geometric pattern of horizontal bands inside a circle, rendered entirely without external libraries or frameworks.

Dec 4, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example displays a series of 100 thin, vertical rectangles arranged horizontally across the screen, each spanning the full height of the browser window. It creates a minimalist, striped visual composition that fills the viewport. The code generates an SVG element using the Document API and sets its dimensions to match the window size. It then uses a JavaScript loop to create and append each rectangle, spacing them at 20-pixel intervals with a width of 10 pixels, resulting in a patterned grid-like aesthetic.

Dec 2, 2023

Loading thumbnail…

Javascript basics

This example demonstrates JavaScript language fundamentals, including variable assignment, increments, loops, and function declarations, with output logged to the browser console. The page uses a minimal HTML structure with inline CSS to remove body margins and prevent scrolling, while a static SVG element serves as a placeholder on a blank canvas. The code explores modern syntax features such as `let`, arrow functions, and template-free function expressions, though no visualization is rendered. It relies solely on native browser APIs—`console.log` for debugging and a hardcoded `<svg>` tag—without external libraries or data sources.

Dec 2, 2023

Loading thumbnail…

Untitled

This example displays 100 horizontal SVG rectangles stacked vertically, each rendered with varying heights and widths across the viewport. The code uses D3’s `select` method to append an SVG element to the body and sets its dimensions from `window.innerWidth` and `window.innerHeight`. Inside a loop, it creates each rectangle via `document.createElementNS`, setting attributes for positioning and size, and appends them directly to the SVG using `appendChild`. The visualization shows a striped pattern of bars without any interactivity or data binding.

Nov 29, 2023