Zach Herwitz

@zachherwitz·3 public vizzes

Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960-by-500 canvas. The circle’s position updates via React’s `useState` and `useCallback` hooks, triggered by the SVG’s `onMouseMove` event, which passes `clientX` and `clientY` coordinates. The circle starts at the center and moves smoothly with pointer movement, demonstrating reactive state-driven rendering without any external data source.

Jul 5, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a React application using the Fetch API. It fetches a CSV file containing CSS named colors from a GitHub gist and logs the raw text output to the browser console. The code uses asynchronous JavaScript with `fetch` and `async/await` syntax within a `fetchText` function, showcasing a fundamental pattern for data loading in web applications. No visualization is rendered; the example focuses solely on the data retrieval and parsing workflow.

Jul 2, 2021

Loading thumbnail…

Smiely Face Part 1

This example renders a smiley face as a modular React component built with SVG. It shows a yellow circle background, two black eyes, and a curved mouth created using the d3.arc API with specified start and end angles. The code imports React and ReactDOM directly via CDN, and composes the face from separate components for the background, eyes, mouth, and an SVG container that centers the graphic using a translate transform. The d3.v7 arc function is used to generate the mouth path, while all other shapes are standard SVG elements.

Jul 2, 2021