100%

Fork of Mouse Follower

✓ Published0🌍 Public

Last edited Aug 12, 2024

Created on Aug 12, 2024

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.

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…

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

91% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse pointer, changing to a random color and opacity with each movement. The visualization uses unidirectional data flow, where a state object is updated on mouse events and passed to a rendering function. Built with D3.js v7, it uses `select` to manage an SVG and circle element, while custom `randColor` and `randOpacity` functions generate random values.

SSpencer McAvey

89% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, changing its fill color to a random RGB value on every mouse movement. The React application tracks mouse coordinates via the `onMouseMove` event handler, updating state with `useState` and `useCallback` from React 16.9.0. The SVG element is rendered through ReactDOM, with the circle's position and color properties bound directly to the current mouse position and a randomly generated color string. This creates an interactive visualization where the circle's appearance changes continuously as the user moves the pointer.

SSatyam Sundaram

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

88% match

Loading thumbnail…

Fork of Mouse Follower Simple

A circle follows the mouse across a full-screen SVG, shifting to a random color from a predefined palette on every movement. The example uses D3 v7's selection methods, including `svg.on('mousemove')` for event handling and `circle.attr` to update position. An initial `getColor()` function picks randomly from an array of seven colors, while CSS hides page margins and overflow. The visualization demonstrates basic interactive SVG rendering with D3's data-binding approach.

MMartha Cash

87% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas, updating its position through a unidirectional state flow. The `viz.js` module listens for `mousemove` events on the SVG and calls `setState` to store the cursor’s x and y coordinates, which are then passed back as props to re-render the circle’s `cx` and `cy` attributes. Using D3 v7’s `select` and data joins, the code binds a single circle element to the state, demonstrating a simple reactive pattern where the view is a pure function of the current state.

Mmanishcheruku

87% match

Loading thumbnail…

Fork of Mouse Follower (some experiments)

A circle follows the mouse cursor within a full-window SVG canvas. The example demonstrates unidirectional data flow in React, where the mouse position is the data. The circle’s center coordinates are set from the current state, initialized to the window’s center. The code uses D3’s `select` API to manage the SVG and circle elements, and RDP’s `viz` and `setState` functions to handle rendering and state updates in response to `mousemove` events.

Hhbrng.computer@mailbox.org

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

87% match