Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Kyle's Mouse Follower

Public visualization

Kyle's Mouse Follower

0 stars0🌍 Public
KKyle?
Last edited Jan 19, 2023
Created on Jan 19, 2023
Forked from Mouse Follower

A circle tracks the mouse across a full-screen SVG, with its color and radius changing continuously based on the cursor's x and y coordinates. The example demonstrates a unidirectional data flow pattern: mouse events trigger a `setState` callback, which updates a centralized state object that drives the rendering. Using D3 v7's `select`, `join`, and event handling, the circle's `cx`, `cy`, `r`, and `fill` attributes are recomputed from the current state on each render. The color is derived from the coordinates in an RGB string, creating a gradient-like effect as the mouse moves.

AI-generated description

A circle that follows the mouse using unidirectional data flow. And changes the color and size of the circle based on its position in the frame.

Comments

Sign in to join the discussion.

MIT Licensed