{"version":"1.0","type":"rich","title":"Hover to Select: Interaction with Unidirectional Data Flow","description":"Five fruit circles render in an SVG using D3 v5 within a React framework, with apples and lemons distinguished by ordinal color and radius scales. Hovering over a circle triggers a navy stroke via mouseover and mouseout events, updating a selectedFruit state variable that flows unidirectionally into the fruitBowl render function. Transitions animate circle entry, exit, and size changes over one-second durations as the fruit array is modified through pop and type replacement operations.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e2f25d921e974ea8a21c06487c438377?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}