{"version":"1.0","type":"rich","title":"Hover to select","description":"This example demonstrates a data visualization of fruits as colored circles, highlighting how to use hover interactions to select a fruit. The visualization is built with React, using D3’s `scaleOrdinal` for color and radius mapping, and SVG animation. When the user hovers over a circle, the `setSelectedFruit` function updates the selected fruit, adding a black stroke; mouseout clears the selection. The code also shows adding, removing, and updating fruit data with transitioned animations.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/57e5b667ef4640e0a3576d3ed6e92ad5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}