Make Something: Fork of Mouse Follower

100%

Make Something: Fork of Mouse Follower

✓ Published0🌍 Public

Last edited Jan 15, 2023

Created on Jan 10, 2023

This example demonstrates a paint tool where a circle follows the mouse and leaves a trail of colored dots. Users draw by moving the pointer, cycle through nine colors by clicking, and adjust brush size from five preset values by right-clicking. The visualization uses a unidirectional data flow with a custom `viz` function and a `setState` callback. D3 selections handle mouse events and append SVG circles dynamically, while a text label shows the "Paint!" instruction in the center-top of the viewport.

AI-generated description

A circle that follows the mouse using unidirectional data flow. This is a paint tool. Move the mouse to draw! Click to change colors, and right click to change brush size!

MIT Licensed

Similar vizzes

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

82% match

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

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

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

82% 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…

Fork of Mouse Follower

A circle follows the mouse cursor across a full-viewport SVG. The example demonstrates unidirectional data flow: mouse events trigger a state update, which then re-renders the visualization. Built with D3 v7, it uses `select`, `join`, and event handlers to bind the circle’s `cx` and `cy` attributes to the current cursor position. The state is managed externally and passed into the `viz` function, with `setState` triggering a re-render on each mouse move. No external data source is used; the interaction is purely based on user input.

Ssunole896@yahoo.com

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

Make something

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen, using a unidirectional data flow pattern. The code uses d3-selection’s `select` and `selectAll` with data joins to create and update an SVG element. Mouse movement events trigger a `setState` function that updates an immutable state object with the cursor’s `x` and `y` coordinates, which then re-renders the circle’s `cx` and `cy` attributes. The rendered circle has a fixed radius of 50 pixels, and the SVG fills the entire viewport.

QQingyang Wang Profolio

80% match