JBayne07

@JBayne07·3 public vizzes

Loading Data with React & D3

This example displays a pie chart of CSS named colors, with each slice filled according to its RGB hex value. The code loads data from a remote CSV file using D3’s `csv` utility into React state. D3’s `pie` generator computes slice angles, while the `arc` generator produces the SVG paths rendered as React elements. The chart uses the `useEffect` hook to fetch data asynchronously, showing a “Loading...” prompt until the dataset arrives.

Nov 7, 2021

Loading thumbnail…

Mouse Follower

A single yellow circle with a black stroke follows the mouse cursor across a full-screen SVG canvas. The circle’s position updates to the exact coordinates of the pointer via React’s `useState` and `useCallback` hooks, which capture `clientX` and `clientY` from the `onMouseMove` event. The application uses ReactDOM to render the SVG element, with the viewport dimensions derived from `window.innerWidth` and `window.innerHeight`. The example demonstrates basic pointer tracking with a minimal, event-driven React component.

Nov 3, 2021

Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in React with SVG, each face generated with randomized eye offsets, eye radii, and mouth dimensions. The face components compose reusable subcomponents—BackgroundCircle, Eyes, Mouth, and FaceContainer—to build the layered SVG structure. D3's arc generator creates the curved mouth path, while the spread of faces shows how varying parameters produce distinct expressions. The rendering uses ReactDOM to mount the app and d3.range to generate the face array.

Oct 28, 2021