joepointon1

@joepointon1·3 public vizzes

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the user's movements. The visualization uses React's `useState` hook to store the mouse coordinates and an `onMouseMove` event handler on the SVG element to update that state. The circle is rendered with ReactDOM in a production build, with the SVG dimensions fixed at 960 by 500 pixels and a circle radius of 30. No external data source is used; the interaction is entirely driven by pointer events.

Mar 31, 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 displays the raw text contents of the `cssNamedColors.csv` file in the browser console. The code defines an asynchronous function that fetches the CSV and logs the resulting text, with a commented-out alternative approach included for reference. The page itself is minimal, with large centered text styling, but all observable output occurs in the console.

Mar 31, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of five identical cartoon faces using React components. Each face is composed of SVG primitives—a yellow background circle, two eyes, an arc-based mouth, and decorative lines—positioned via a translated coordinate system. The `Face` component composes smaller components like `BackgroundCircle` and `Eyes`, while the `Mouth` uses d3’s `arc` generator to create a curved path. The React app maps over an array of five elements, displaying multiple faces with fixed dimensions and styling.

Mar 28, 2021