seancote

@seancote·3 public vizzes

Mouse Follower

A circle traces the user's mouse location within a 960-by-500 SVG canvas, updating its center coordinates live. The React app uses the `useState` hook to store the cursor's `clientX` and `clientY` values from the `onMouseMove` event, and D3 v5 is loaded via unpkg but not directly invoked. The rendering approach relies on ReactDOM to draw the circle with SVG markup, starting from the canvas center.

Mar 24, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using the Fetch API. It retrieves a file containing CSS named colors and logs the raw text to the browser console. The code uses an asynchronous function with `fetch` and `response.text()` to load the data, showing the foundational step of acquiring CSV content before any parsing or visualization occurs. No visualization is rendered; the example focuses solely on the data-loading process.

Mar 24, 2021

Loading thumbnail…

Smiley Face Part I

This example builds a smiley face using React components and D3’s arc generator. It renders an SVG containing a yellow circular head, two black eyes, and a curved mouth. The face is assembled from separate React components (`Head`, `Eyes`, `Mouth`, `FaceContainer`) that receive positional and sizing props. D3 v5 powers the mouth shape via the `arc()` API, while React 16.9 manages stateful rendering and DOM output. The result is a static, centered smiley face on a 960×500 canvas.

Mar 3, 2021