Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

40af7855023e4d5fb98707d9d1d729a2

Mouse Follower

0 stars34🌍 Public
CCurran Kelleher
Last edited Jun 14, 2023
Created on Jan 9, 2023

A circle follows the mouse pointer across the screen, updating its position in real time based on cursor movement. The visualization demonstrates unidirectional data flow with D3 v7 and React, where mouse events trigger state updates that re-render the circle’s coordinates. The code uses d3-selection `select` and `join` to bind SVG elements, with an initial state centered in the viewport. The React framework manages state through a `setState` callback, while the D3 `mousemove` event handler captures pointer positions.

AI-generated description

A circle that follows the mouse using unidirectional data flow. See also Mouse Follower with React.