{"version":"1.0","type":"rich","title":"D3 Course 6: Interaction with Unidirectional Data Flow","description":"This example demonstrates interactive selection and highlighting of fruit marks in an SVG bowl, with click and hover events triggering updates through a unidirectional data flow. The fruit bowl renders apples and lemons as circles using a D3 data join, with transitions animating size and position changes. Clicking a fruit selects it with a black stroke, while hovering applies an orange stroke, managed by callback props passed from the main script. The code uses D3 v5 APIs including `scaleOrdinal` for colors and radii, `selection.on` for event listeners, and `transition.duration` for smooth updates across three timed state changes.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"","width":960,"height":500,"cache_age":3600}