D3 Course 6: Interaction with Unidirectional Data Flow
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.