Viewing a saved revision (read-only)
7df7812ff76740329ba8f8dc3c034a5c
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.
AI-generated descriptionData Visualization with D3 Course; <b>Interaction with Unidirectional Data Flow</b><br>
<h3>Interaction with Unidirectional Data Flow</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Listening Click Events</b></li> <li><b>Unidirectional Data Flow</b></li> <li><b>Selecting a Mark by Clicking</b></li> <li><b>Highlighting Selected Mark</b></li> <li><b>Select a Mark by Hovering</b></li> </ul> </td> </tr> </table>