Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse follower, a circle

Public visualization

Viewing a saved revision (read-only)

1505c5cab40d450290dafede2435ae7b

Mouse follower, a circle

0 stars0🌍 Public
WWhitney Hung
Last edited Jul 26, 2020
Created on Jul 25, 2020

A circle follows the mouse cursor across a full-screen SVG canvas, with its position updating live in response to pointer movement. The visualization demonstrates interactive React state management, where the initial mouse position is set to the center of the window. Using React's `useState` hook and an SVG `onMouseMove` event handler, the component captures `clientX` and `clientY` coordinates from the event to update the circle's `cx` and `cy` attributes. The code relies on React 16.9 and ReactDOM to render the circle element.

AI-generated description

Trying out interaction with React

A program that makes a circle to follow your mouse.

Source: Dataviz 2020 episode 14. Tutorial link: https://www.youtube.com/watch?v=9zzIwsASgeo