Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Dataviz 2020_Ep14 - 8. Interaction With React - useState hook, useCallback - Mouse Follower

Public visualization

Viewing a saved revision (read-only)

8ccdbe85588b4149b2bf8aa2cab6996f

Dataviz 2020_Ep14 - 8. Interaction With React - useState hook, useCallback - Mouse Follower

0 stars1🌍 Public
MMinwoo Pak
Last edited Jun 4, 2021
Created on May 29, 2021

A React-based SVG visualization renders a single circle at the center of a 960 by 500 canvas. The circle follows the mouse cursor in real time as the user moves it across the screen, using the `useState` hook to store the cursor’s x and y coordinates and the `useCallback` hook to handle the `onMouseMove` event. The React component updates the circle’s `cx` and `cy` attributes directly, with D3 v6 loaded but not used for this interaction. No external data is involved; the graphic demonstrates state-driven rendering and event handling in React.

AI-generated description

Dataviz 2020_Ep14 - 8. Interaction With React - useState(hook), useCallback - Mouse Follower

A program that follows your mouse with a circle