aminplc

@aminplc·4 public vizzes

a program that makes a circle follow a mouse pointer

A React application renders a single circle that tracks the mouse pointer within an SVG canvas. The circle’s center coordinates are updated on every mouse move event using React’s `useState` and `useCallback` hooks, with the `cx` and `cy` attributes bound to the pointer’s clientX and clientY values. The SVG viewport is fixed at 960 by 500 pixels, and the circle has a radius of 60. The example demonstrates real-time, state-driven interaction between mouse events and SVG elements in a React component.

Nov 17, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load a CSV file from a remote URL and parse its contents using the standard `fetch` API. The visible code fetches a CSS named colors dataset from a GitHub gist and logs the raw text to the console, though it does not display or visualize the data. The main rendering logic uses React and D3's `range` and `arc` functions to generate a grid of randomized cartoon faces with varying eye positions, eye radii, and mouth dimensions, but this face generation is unrelated to the CSV parsing. The example primarily illustrates the asynchronous text-fetching pattern.

Nov 17, 2023

Loading thumbnail…

Loading and Parsing CSV data

A grid of randomly generated smiley faces demonstrates a modular React component approach to SVG data visualization. Each face is composed of reusable subcomponents (`BackCircle`, `Eyes`, `Mouth`) assembled within a `FaceContainer` that handles SVG coordinate transformations. The component props (`eyeofsetx`, `mouthRadius`, etc.) are populated using `d3.range` and `Math.random`, producing varied facial expressions without external data sources. The mouth path is constructed using `d3.arc` with dynamic inner and outer radii, while React 18 renders the `Face` components into the DOM. This example emphasizes component composition over traditional data plotting.

Nov 17, 2023

Loading thumbnail…

smily face part 1

A field of small smiley faces displays the results of a randomized parameterization. Each face is rendered as an SVG via React, with a yellow circle, black stroke, two eyes, and an arc-based mouth. The code uses D3’s `arc` helper to generate the mouth path, while `range` from D3 drives the array mapping that creates 18 face instances. Random values vary eye offset, eye radius, mouth width, and mouth radius across the grid, and all faces are positioned within a shared coordinate system using an SVG `g` transform.

Nov 17, 2023