Forrest Hosten

@treyh23·6 public vizzes

Mouse Follower - Practice

A yellow smiley face with black-outlined eyes fills the browser window, centered via a React component that computes dimensions from `window.innerWidth` and `window.innerHeight`. The SVG face scales its radius relative to viewport height, with eye positions offset by fixed pixel values. React 16.9 renders the circles declaratively, using a `<g>` transform to place the face at the viewport’s midpoint. The empty mouth is omitted from the final render despite commented-out placeholder markup.

Nov 16, 2021

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates a minimal approach to loading and parsing CSV data using D3. It fetches a remote CSV file containing CSS color names and values, then applies D3’s `csvParse` method to convert the raw text into an array of objects. The code shows the initial steps of a data pipeline, concluding by counting the parsed rows and constructing a simple message with that count. It relies on the `fetch` API for network requests and the D3 v7 library, with no visual output beyond this text-based summary.

Nov 14, 2021

Loading thumbnail…

Mouse Follower

A yellow smiley face follows the mouse cursor across an SVG canvas. Built with React, the component tracks pointer coordinates through the `onMouseMove` event and updates a circle’s position via `useState` and `useCallback`. The SVG renders a single interactive shape with no predefined facial features, responding dynamically to user movement.

Nov 14, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file from a remote URL using the Fetch API, then outputting the raw text to the browser console. The code defines an asynchronous function that fetches the CSV and converts the response to text, referencing a gist-hosted dataset of CSS color names. Although the parsing step is not implemented, the example lays the groundwork for converting CSV text into structured data. It relies on standard JavaScript promises and async/await syntax, with no external libraries or visualization frameworks.

Nov 14, 2021

Loading thumbnail…

Completed Smiley

A completed cartoon smiley face is rendered as a static SVG using React components. The face consists of a yellow background circle, two black eyes, and a mouth drawn as an arc, all composited through custom React components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The mouth shape is generated using the D3 `arc` API, while the overall layout is positioned within an SVG via a translated group. The example demonstrates reusable component composition and D3 integration within a React framework.

Nov 14, 2021

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as an SVG in React, with circular eyes and a curved mouth drawn using an arc path. The code imports the `arc` function from d3 and defines the face geometry with fixed dimensions, including a stroked outer circle and offset eye circles. The React component returns the SVG, and the rendering is handled by d3.v7 within a React 16.7 application.

Nov 14, 2021