Goh Ngee Juay

@GohNgeeJuay·3 public vizzes

Mouse Follower

A yellow circle tracks the mouse cursor in real time within an SVG canvas, using React to manage the circle's position as state. The `App` component listens to `onMouseMove` events on the SVG element, updating the circle's `cx` and `cy` attributes via `useState` and `useCallback`. The example integrates React with D3 for SVG rendering, with the circle initially centered at 480,250.

Dec 28, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load a CSV file from a remote URL and output its raw text to the browser console. It uses the Fetch API with async/await syntax to retrieve the data, wrapping the process in a custom `fetchText` function. The CSV is sourced from a GitHub Gist containing CSS named colors, and the code parses it by calling `response.text()` before logging the result. No visualization is rendered; the focus is solely on the data-loading and parsing workflow.

Dec 27, 2023

Loading thumbnail…

Let's Make a Face Part I

A grid of smiling faces, each with randomized eye size and placement, eyebrow position, and mouth curvature, demonstrates the modular construction of SVG graphics in React with D3. The code breaks the face into reusable components—`BackgroundCircle`, `Eyes`, `Eyebrows`, `Mouth`, and `Nose`—which are composed within a `Face` component using a `FaceContainer` that translates the SVG coordinate system to a shared center. Rendering relies on React’s `ReactDOM.render`, while D3’s `arc` generator creates the mouth path and the `range` function produces the layout of six columns by three rows.

Dec 13, 2023