Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Finder

Public visualization

Viewing a saved revision (read-only)

ab03df957d5c4ffb93b0b8a4fad97580

Mouse Finder

0 stars0🌍 Public
SSeekerzero
Last edited Jan 16, 2023
Created on Jan 16, 2023

A mouse tracker renders a single circle that follows the cursor, with its radius scaling dynamically based on movement speed. The visualization uses D3 v7’s selection and event handling, attaching a `mousemove` listener to an SVG that spans the full window. Movement deltas (`event.movementX` and `event.movementY`) drive a formula calculating radius, clamping it between 5 and 100 pixels. The circle uses transparent fill with a black stroke, and state updates trigger re-renders through a custom `setState` pattern, while `selectAll().join()` manages the SVG and circle elements.

AI-generated description

A mouse finder which the circle will enlarge when the user moves the mouse faster.