Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

831358712bc34af89e305bd7b754a865

Mouse Follower

0 stars1🌍 Public
FFrancisco Ortega
Last edited Mar 11, 2021
Created on Mar 6, 2021
Forked from Smile Face part 1

A circle follows the mouse cursor across an SVG canvas, with React managing its position in real time. The component uses React’s `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. The example demonstrates a minimal integration of D3.js (v5) with React, where D3 provides no visual functions—only the SVG rendering is handled by React, and the circle radius is fixed at 30 pixels. The canvas is 960 by 500 pixels, and the initial cursor position starts at the center.

AI-generated description

Showing how to interact with React by manipulating a circle