Multicolor Mouse Follower

100%

Multicolor Mouse Follower

✓ Published0🌍 Public

Last edited Jan 12, 2023

Created on Jan 12, 2023

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.

AI-generated description

Based on original work by Spencer, this example shows how you can have multiple independent pieces of state that respond to different interactions:

Moving the mouse moves the circle
Clicking changes color

MIT Licensed

Similar vizzes

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

89% 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

89% 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 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

88% 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

87% 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

86% match

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

86% 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

86% match