Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

useCallback - Mouse follower

Public visualization

Viewing a saved revision (read-only)

3f46896136804b95b33b8305bd007b39

useCallback - Mouse follower

0 stars0🌍 Public
HHalcyonWjr
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from Hello VizHub

A React application renders an SVG circle that follows the mouse cursor across a 960x500 canvas. The component uses the `useState` hook to track mouse position and `useCallback` to memoize the mouse-move event handler, preventing unnecessary re-renders. The `onMouseMove` event on the SVG element updates the circle's `cx` and `cy` attributes via D3-style coordinate mapping. The demo showcases React 16.9 hooks for state management and D3 v5 for SVG rendering, with the circle's position initialized at the canvas center before responding to user interaction.

AI-generated description

Smiley face implementation with React & D3.