Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

dv2020-ep14-viz14 - Mouse Follow

Public visualization

Viewing a saved revision (read-only)

0fb5b6072e3146eea2d4138491c0b8e1

dv2020-ep14-viz14 - Mouse Follow

0 stars2🌍 Public
Zzach b.
Last edited Apr 29, 2023
Created on Mar 12, 2023

A circle follows the mouse as it moves over an SVG canvas. The visualization tracks the cursor’s client coordinates and updates the circle’s center position in real time. Built with React hooks (`useState` and `useCallback`), it handles mouse movement via the SVG `onMouseMove` event, re-rendering the circle’s `cx` and `cy` attributes. The example uses React 16.9 and ReactDOM for rendering, with a static SVG viewport of 960 by 500 pixels.

AI-generated description

A circle follows your mouse.

Episode 14