ManbirJudge

@ManbirJudge·3 public vizzes

Loading Data in React using D3

This example demonstrates how to load and display information about a CSV dataset in a React application using D3. It shows the file size, row count, and column count of a named colors dataset fetched from a GitHub gist. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, while `d3.csv` retrieves and parses the data. A separate `Message` component computes the statistics and formats the output text, which is rendered inside a `<pre>` element.

Oct 17, 2021

Loading thumbnail…

Circle Following your Cursor

A circle tracks the user’s cursor across a full-screen SVG canvas, updating its center position in real time. Built with React 16.9 and SVG, the component uses the `useState` hook to store mouse coordinates and `useCallback` with an `onMouseMove` handler to capture `clientX` and `clientY` events. The circle’s `cx` and `cy` attributes are bound to this state, causing a smooth, reactive movement that mirrors the pointer exactly.

Oct 17, 2021

Loading thumbnail…

Circle Following Cursor

A single circle sits on a blank SVG canvas and appears static, but its position is intended to track the viewer’s cursor. The example demonstrates basic event-driven interactivity in SVG, using an HTML `<circle>` element within an inline `<svg>` tag. No JavaScript or external libraries are present; the code only sets initial `cx` and `cy` attributes, leaving any cursor-following behavior unimplemented in the provided files.

Oct 17, 2021