Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Hover to select

Public visualization

Hover to select

0 stars0🌍 Public
Ggorfoula
Last edited Jul 21, 2020
Created on Jul 21, 2020
Forked from Click to select

This interactive example demonstrates selection through hover using D3.js within a React framework. Five circles representing fruit items respond to mouseover and mouseout events, triggering a state change that highlights the selected circle with a black stroke. The visualization shows animated transitions as fruits are removed and one apple changes to a bitter lemon. Using D3 v5's `select`, `scaleOrdinal`, and transition methods, the SVG rendering animates circle radii and positions over 1000 milliseconds, with the selection state managed through React's state variable.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

Comments

Sign in to join the discussion.

MIT Licensed