Mouse Follower that Changes Color

100%

Mouse Follower that Changes Color

✓ Published1🌍 Public

Last edited Jan 16, 2023

Created on Jan 16, 2023

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.

AI-generated description

A circle that follows the mouse using unidirectional data flow.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Color Changing Mouse Follower

A circle follows the mouse cursor across the canvas, and a click randomly changes its fill color. The visualization demonstrates a unidirectional data flow pattern using D3 v7, where mouse events update a state object which then triggers a re-render of the SVG. It uses D3's `select` and `.join` operations to efficiently create and update the circle element, while the rendering logic resides in a separate `viz.js` module. The circle's position and color are driven entirely by the state managed through a custom `setState` function.

LLauren

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

89% match

Loading thumbnail…

Fork of Mouse Follower that Changes Color

A circle follows the mouse across an SVG canvas, changing color with each click. The visualization uses D3's `select`, `selectAll`, and `join` methods to declaratively manage the SVG circle element, tracking mouse position and color state in an external `state` object. Rendering is driven by unidirectional data flow: `setState` updates the state and triggers a re-render, which applies the new `cx`, `cy`, and `fill` attributes to the circle.

Ggalyniayaroshenko

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

89% match

Loading thumbnail…

Mouse Follower

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.

Mmelissastrong89@gmail.com

89% match

Loading thumbnail…

Multicolor Mouse Follower

This example demonstrates how a visualization can maintain multiple independent pieces of state that respond to different user interactions. A circle follows the mouse's horizontal and vertical position through mousemove events, while clicking randomly changes its fill color and opacity using a custom color generator. The visualization uses D3.js version 7 with the join pattern to bind SVG elements, separating the state management logic from the rendering function that updates the circle's attributes.

CCurran Kelleher

89% match