100%

Corey's Mouse Follower - week5

✓ Published0🌍 Public

Last edited Feb 9, 2024

Created on Feb 9, 2024

A single blue circle follows the mouse pointer across an SVG canvas, changing to a random color on click. The visualization uses D3’s `select` and `pointer` methods within a Svelte component, with a `ResizeObserver` managing canvas dimensions and `setState` updating circle coordinates and fill color on each interaction event.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

Svelte

Here's a video on how to get started with Svelte as well!

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Mouse Follower

A large blue circle follows the mouse cursor as it moves over an SVG canvas. The visualization uses React's `useState` and `useCallback` hooks to track the pointer's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move. The circle is rendered as a literal SVG `<circle>` element with a fixed radius of 30 pixels, centered initially at the middle of a 960×500 viewport.

RRichardPearce60

81% match

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

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

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

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

80% match

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a green SVG canvas, responding instantly to pointer movement. The visualization uses React’s `useState` and `useCallback` hooks to track the mouse position and update the circle’s `cx` and `cy` attributes. The SVG element’s `onMouseMove` event handler captures the cursor coordinates, while D3’s `arc` module is imported but unused. The example demonstrates a simple interactive pattern combining React state management with SVG rendering.

TTyler Durham

79% match

Loading thumbnail…

Mouse Follower

A mouse-controlled circle follows the cursor across an SVG canvas, changing its fill color randomly with every mouse movement. Built with React and D3, the component tracks client coordinates through an `onMouseMove` handler and updates the circle’s `cx`, `cy`, and `fill` attributes via state. The example demonstrates reactive SVG rendering with D3’s `rgb` color generator.

SSamir Nandardhane

79% match