Skip to main content
100%

D3 Course 6: Interaction with Unidirectional Data Flow

✓ Published0🌍 Public
MMe3P
Last edited Apr 2, 2020
Created on Apr 2, 2020

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 description

Data 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>
MIT Licensed

Similar vizzes