Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Move

Public visualization

Viewing a saved revision (read-only)

7ae53b3adfb74e08bc2b16a5dddba3be

Mouse Move

0 stars0🌍 Public
VVikil Lakkavatri
Last edited May 1, 2024
Created on May 1, 2024

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 description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop