100%

Mouse Follower

✓ Published0🌍 Public

Last edited May 12, 2024

Created on Feb 6, 2024

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.

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

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

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

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

A small, randomly colored circle follows the mouse cursor across a full-screen SVG canvas, changing to a new random color with every mouse movement. Built with D3, the code uses `select` to append an SVG element sized to the window, a `circle` element for the follower, and the SVG `on('mousemove')` event to update the circle's `cx`, `cy`, and `fill` attributes. No data source is used; the visualization is purely interactive, with the color generated via a custom `getRandomColor` function.

Ssrividyap03

90% match

Loading thumbnail…

Mouse Follower Simple

A simple interactive visualization renders a circle that follows the mouse cursor. The circle grows in radius as the user moves the mouse faster, measured via the `event.movementX` and `event.movementY` properties, with its size capped at 100 pixels. The example uses D3 v7's selection and data join methods (`select`, `selectAll`, `join`) to bind SVG elements, updating position and radius on each `mousemove` event. The circle is styled with a transparent fill and a black stroke, demonstrating dynamic SVG updates with D3.

SSeekerzero

90% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse pointer across the screen, updating its position in real time based on cursor movement. The visualization demonstrates unidirectional data flow with D3 v7 and React, where mouse events trigger state updates that re-render the circle’s coordinates. The code uses d3-selection `select` and `join` to bind SVG elements, with an initial state centered in the viewport. The React framework manages state through a `setState` callback, while the D3 `mousemove` event handler captures pointer positions.

CCurran Kelleher

90% match

Loading thumbnail…

Mouse Follower Simple

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen. The circle is initially positioned at coordinates (50,50) and updates its position in real-time in response to mouse movements. The code uses the D3.js library (v7) to select the `#app` div, append an SVG element sized to the full window dimensions, and create a circle element with a radius of 50 pixels. The visualization listens for `mousemove` events on the SVG and uses the event's x and y coordinates to update the circle's `cx` and `cy` attributes, creating a direct and responsive tracking effect.

CCurran Kelleher

90% match