100%

Mouse Follower

✓ Published0🌍 Public

Last edited Mar 15, 2025

Created on Mar 15, 2025

This example demonstrates a red, green, or blue circle that tracks the mouse pointer across an SVG canvas, changing to a random hex color on each click. It uses D3’s `select` and `pointer` methods to capture mouse coordinates and update state through immutable update patterns, spreading the previous state object and overwriting the `x`, `y`, and `color` properties. The circle’s position and fill are bound directly to the current state values via D3 joins.

AI-generated description

A program that follows the mouse around and changes its color using immutable update patterns.

Challenge

Use this pattern to make something else respond to mouse events

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

This example shows a single circle that follows the mouse pointer across an SVG canvas, with its fill color changing to a random hex value on each click. The circle’s position and color are derived from the current mouse coordinates (via the `pointer` API) and a color string stored in the state. The visualization uses D3’s `select`, `join`, and method-chaining pattern to bind the SVG element and circle, updating them through the `setState` callback on `mousemove` and `click` events.

Iismail.otman1995@gmail.com

94% match

Loading thumbnail…

mouse follower

This example shows a single green circle that follows the mouse pointer across an SVG canvas. Moving the mouse updates the circle’s position via `d3.pointer` and state management, while clicking changes its fill color to a random hex value. The code uses D3 v7, with `select`, `pointer`, and data joins to bind the circle’s coordinates and radius. The visualization demonstrates reactive updates through a `setState` callback, with the circle rendered at half opacity.

DDonald Bagwell

93% match

Loading thumbnail…

Mouse Follower

This example demonstrates a mouse-following circle that changes position with cursor movement and shifts to a random color on click. The visualization starts with a blue circle centered in the viewport, then uses d3’s `select`, `pointer`, and `join` methods to render an SVG and update its attributes. State changes follow immutable update patterns, spreading the previous state and overriding specific properties like `x`, `y`, and `color`. The code also relies on container dimensions and event listeners for `mousemove` and `click` interactions.

CCurran Kelleher

92% match

Loading thumbnail…

Mouse Follower

This example demonstrates a single semi-transparent circle that follows the mouse cursor across a light green background, changing color randomly with each click. The visualization uses D3’s `mousemove` event and `d3.pointer` to update the circle’s position, while a `click` event triggers a random hex color assignment. The circle’s coordinates and fill are stored in a state object, and D3’s data join (`selectAll`/`join`) binds this state to the SVG circle element. The rendering approach relies on direct SVG manipulation via D3, with no external data source—purely interactive and state-driven.

SSubhendu Karmakar

91% match

Loading thumbnail…

Mouse Follower That Changes Color

A circle follows the mouse cursor across a full-screen SVG canvas, changing its fill color to a random RGB value on each click. The visualization demonstrates unidirectional data flow with a state object managed by `setState`, while D3 v7 selections and the `join` pattern handle SVG rendering. Mouse position events trigger state updates through `svg.on('mousemove')`, and color changes use `svg.on('click')` with random `rgb()` generation. The example uses d3.select and d3's data join to bind single elements.

Jjjlaber

90% match

Loading thumbnail…

Mouse Follower that Changes Color

A D3.js v7 circle of radius 50 follows the mouse cursor, changing its fill color to a random RGB value each time the user clicks. The visualization demonstrates unidirectional data flow from mouse events through a state object that stores the current x, y, and color coordinates. Built with D3's `select` and `join` APIs, it renders an SVG inside the `#app` container, updating the circle's `cx`, `cy`, and `fill` attributes on every state change.

CCurran Kelleher

89% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. Clicking anywhere randomly changes the circle's fill color. The visualization uses D3 v7 selection and join operations to declaratively manage the SVG and circle elements, with state tracking cursor position and color. Documentation is provided via an embedded YouTube video.

MMark D. Clements

88% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse across a light green canvas, changing its fill color to a randomly generated hexadecimal value on each click. The example demonstrates immutable state updates via a Redux-style pattern, where a `setState` callback creates a new state object rather than mutating the existing one. Built with d3.js (v7.8.5), it uses `d3.select`, `d3.pointer`, and SVG joins to handle mouse events and render the circle. The initial color is blue, and the circle’s position is updated with every `mousemove` event using the current pointer coordinates.

Ssadhanasri125@gmail.com

88% match