{"version":"1.0","type":"rich","title":"Hover to select","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/35e0a795a61540deab0adee967825090?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}