{"version":"1.0","type":"rich","title":"Interaction With Unidirectional Data Flow - Mouse Hover","description":"Five circles representing fruit are rendered as SVG elements inside a 960-by-500 canvas, with each circle’s radius and color determined by its type (orange or lemon) using D3’s `scaleOrdinal`. The visualization demonstrates unidirectional data flow: hovering a circle triggers a `mouseover` event that calls `setSelectedId` to update a selected-id state, which then re-renders the chart, adding a blue stroke to the hovered circle. A `d3.range` generates initial orange fruits, while a lemon is appended, and timed mutations remove fruits and change a type, all handled through D3’s `transition` API for animated updates.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a4dbc7ae05e94f5d91d935b5bc470fea?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}