Austin White

@austinwhite·3 public vizzes

Mouse Mover

A yellow circle follows the cursor in real time within an SVG canvas, responding to mouse movement. The React app uses the `useState` hook to track the pointer's client coordinates and updates the circle's center position on every `mousemove` event. The visualization demonstrates interactive SVG rendering with React's declarative state management, rendering a single yellow circle with a black stroke on a white background.

Apr 18, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading text from a remote URL by fetching a CSS file containing named color data. It uses the JavaScript `fetch` API to retrieve the text asynchronously, then logs the raw contents to the browser console. The code initializes a constant `FetchURL` pointing to a GitHub Gist, invokes `FetchText` as an async function that wraps `fetch` and `response.text()`, and finally chains a `.then` callback to output the result. No parsing or visualization occurs; the example focuses solely on the data-retrieval and logging workflow.

Apr 18, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized cartoon face is rendered as a reusable React component, showing how SVG primitives compose to build a simple character. The face uses a yellow background circle, two eyes, and a mouth drawn with D3's `arc` generator, positioned via React props for offsets and radii. The `FaceContainer` wraps the SVG and uses a `<g>` transform to center the drawing, while configuration values like stroke width and eye spacing come from the top-level `App` component. D3 v6 is used only for the mouth arc path calculation.

Apr 18, 2021