Viewing a saved revision (read-only)
0fa57b00be47468886d69317ad6cf141
Mouse Move
This example presents a mouse-tracking game in which a colored dot follows the cursor as long as it stays inside the visualization area. The game starts only after the user clicks a green "Start" button; once active, moving the cursor outside the defined bounds changes the dot’s color to red, indicating the player is "out." Built with React and D3 v6, the visualization uses React’s `useState` hook to manage game state and cursor position, while SVG rendering with a `VizContainer` component handles the static margins and drawing area. Mouse events (`onMouseMove`, `onMouseLeave`) update the dot’s coordinates, clamped to the inner dimensions.
AI-generated descriptionBoilerplate code for a React + D3 visualization with:
- CDN links for React, ReactDOM, and D3
- Basic React boilerplate
- Variables for dimensions and margins
- A
VizContainercomponent that:- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the
showMargins={true} prop