arorabaugh

@arorabaugh·4 public vizzes

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time based on pointer movement. The visualization demonstrates mouse-event handling and state-driven rendering with React, using the `useState` hook to store the cursor coordinates and `onMouseMove` to update them. ReactDOM renders an SVG circle whose `cx` and `cy` attributes are bound to the tracked position, with the viewport dimensions fixed at 960 by 500 pixels. No data source or external computation is involved; the example relies solely on React's declarative update cycle.

Jan 4, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file and log its raw contents to the browser console. The visualization fetches CSS named colors data from a GitHub Gist URL using the `fetch` API, then parses the response text via `response.text()`. The code illustrates the asynchronous pattern of chaining `fetch().then()` calls, though it currently only prints the fetched text without parsing it into a structured table or chart. The example serves as a fundamental first step for working with external tabular data in JavaScript.

Jan 4, 2023

Loading thumbnail…

Fork of Smiley Face Part VI

The visualization shows a grid of eighteen randomly generated smiley faces, each rendered with distinct facial features and stroke widths. It first displays the full composition of varied faces before detailing the component-based construction. The code uses React components for each facial element, combined with D3’s `arc` API to generate the mouth paths, and the `range` function from D3 to create the array of faces. The SVG rendering is handled through a custom `FaceContainer` that translates a central group, with all faces drawn in a fixed 160×160 viewport.

Jan 3, 2023

Loading thumbnail…

Smiley Face Part I

This example assembles a partial smiley face from modular React components: a yellow circle with a black stroke forms the head, two smaller circles create the eyes, and an arc-shaped path defines the mouth. The components are composed inside an SVG container that translates the origin to the face's center. The mouth uses d3's `arc` API to generate the path data, spanning from 90 to 270 degrees. All geometry is derived from parameters passed to the `Face` component, showcasing a reusable, data-driven approach to SVG composition with React and D3.

Jan 3, 2023