amandaweisbrod18@gmail.com

@aweisbrod·7 public vizzes

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with a black outline appearing when the cursor enters the drawing area and disappearing when it leaves. The React application uses the `useState` hook to track mouse coordinates and stroke color, updating the circle’s position via the `onMouseMove` event handler on the SVG element. The code renders the circle purely with React and SVG, relying on clientX and clientY from the mouse event for positioning.

Apr 14, 2025

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing CSV data by fetching a remote file and logging its contents to the browser console. It uses the Fetch API to asynchronously retrieve the text from a GitHub gist containing CSS named colors, then prints the raw comma-separated values. The code relies on `fetchText`, a custom async function wrapping `fetch()` and `response.text()`, with no additional libraries or visualization rendering. The page itself is minimal, showing only the console output as the primary result.

Apr 14, 2025

Loading thumbnail…

Smiley Face - Part VI

A grid of eighteen randomly generated smiley faces shows how small variations in facial features create distinct expressions. Each face is rendered as an SVG using React components for the background circle, eyes, and mouth, with d3’s arc generator shaping the smile. Values for stroke width, eye offsets, eye radius, mouth radius, and mouth width are randomized per face, producing subtle differences in appearance across the uniform arrangement.

Apr 11, 2025

Loading thumbnail…

Smiley Face - Part V

This example shows a smiley face composed of a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements within a React component. The face is centered using SVG group transforms, with size and position controlled by constants for radius, offsets, and stroke width. The code imports React for component structure and d3’s `arc` API to generate the mouth path, while the background circle and eyes are plain SVG `<circle>` elements. The visualization uses d3.v7 and React 16.9, with all geometry defined relative to a central origin for easy scaling.

Apr 9, 2025

Loading thumbnail…

Smiley Face - Part III

This example shows a smiley face rendered as an SVG using React and D3.js. The face is composed of a yellow background circle with a black stroke, two black eye circles, and a mouth drawn as an arc path. The code uses D3’s `arc` generator to define the mouth’s inner and outer radii and angular span, while React components structure the SVG elements. All shapes are centered and transformed via SVG groups, with dimensions and offsets stored as constants.

Apr 5, 2025

Loading thumbnail…

Smiley Face - Part II

A yellow smiley face rendered as a React SVG component uses ReactDOM to mount a static graphic. The code draws a large yellow circle with a black stroke, and two smaller black circles for eyes, positioned symmetrically around the center using hardcoded offsets. It demonstrates declarative SVG creation with React, replacing the commented-out plain HTML version.

Apr 4, 2025

Loading thumbnail…

Smiley Face - Part I

This example shows a yellow circle with a thick black outline, creating a simple, static smiley-face base. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face’s vertical center. The graphic is drawn directly in SVG using basic `<circle>` elements, with coordinates hard-coded into the markup. The code does not include a mouth, leaving the face incomplete, as the title suggests. The visualization uses no external JavaScript libraries, relying solely on native SVG rendering.

Apr 4, 2025