{"version":"1.0","type":"rich","title":"Bowl of fruit hover to select","description":"A bowl of fruit rendered as circles in an SVG responds to mouse hover, with a black stroke marking the selected fruit. The visualization demonstrates data joins with entering, updating, and exiting elements, animated via `transition()` over one second. Apples and lemons differ in color and radius using `scaleOrdinal`, while d3’s `selectAll` and `data` manage dynamic changes as fruits are removed or transformed. The React framework calls the `fruitBowl` function on each state update, passing the selected fruit ID to control the stroke styling.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d21ec686abc542cfb662e5da6a37e32f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}