Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

e85331bc1b86475a8b5eb85d8a072178

Mouse Follower

0 stars6🌍 Public
CCurran Kelleher
Last edited May 12, 2024
Created on Feb 6, 2024
Forked from Circles with D3

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

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!