Color Changing Mouse Follower

100%

Color Changing Mouse Follower

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from Menu

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.

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…

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

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

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…

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

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

88% match

Loading thumbnail…

Mouse Follower

A single black circle follows the cursor across a full-screen SVG canvas, updating its position in real time. The visualization demonstrates a minimal state-driven D3 render loop, where a `mousemove` event listener calls a `setState` function to update the pointer coordinates. The `viz` function uses a data join to create and update the circle element, with `d3.select` handling the SVG selection and attribute updates for the x and y positions. The example relies on D3 v7 and a custom render pattern that re-renders the entire visualization on each state change.

MMinwoo Pak

86% match