Mouse Follower

100%

Mouse Follower

✓ Published0🌍 Public

Last edited Jan 18, 2023

Created on Jan 17, 2023

A red square tracks the mouse across a full-screen SVG canvas. The visualization demonstrates unidirectional data flow using D3 v7's `select` and `join` pattern. A `mousemove` event on the SVG invokes a `setState` callback, which updates the state object with cursor coordinates and triggers a re-render, repositioning the 25×25-pixel rectangle. The `viz` function binds the state to the square's `x` and `y` attributes.

AI-generated description

A circle that follows the mouse using unidirectional data flow.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Mouse Follower

A violet square with a dashed magenta border follows the mouse cursor across a full-screen SVG canvas. The visualization responds to every mouse movement event, continuously updating the square’s x and y coordinates to center it on the pointer. Built with D3 v7, it uses the `d3.select` and `svg.append` APIs to create and manipulate the rectangle, while the `svg.on('mousemove', ...)` handler updates the rect’s position attributes. The square measures 50 by 50 pixels and is positioned relative to the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

IIshaChid76

88% match

Loading thumbnail…

Mouse Follower

A circle tracks the cursor across a full-screen SVG canvas. Each mouse movement updates the circle’s center coordinates via a state object and a custom `setState` callback. The visualization uses d3.v7’s `select` API to bind SVG elements and handle `mousemove` events, while `join` synchronizes the circle’s `cx` and `cy` attributes. The canvas resizes to the browser window dimensions.

Jjjlaber

87% match

Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, with its position updating in real time. Built with React and D3 v7, the visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates on a dedicated SVG `onMouseMove` event handler. ReactDOM renders the SVG, and the circle's `cx` and `cy` attributes update live as the pointer moves.

Bbjfmbeck

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

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

86% match

Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves. Built with React and D3 v5, the app uses React’s `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, then re-renders the circle’s `cx` and `cy` attributes accordingly. No data source is involved; the visualization simply demonstrates interactive event handling and state-driven rendering with SVG.

EErik

86% match

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor as it moves across a full-screen SVG canvas. The visualization updates the circle's position in real time using React's `useState` and `useCallback` hooks with an `onMouseMove` event handler. The code combines React 16.9 with D3.js v7, rendering solely through SVG elements without any data source, demonstrating interactive state-driven graphics.

AAustinSkrobar

85% match