Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

General Update Pattern and DOM Element Select Event Handling

Public visualization

Viewing a saved revision (read-only)

95bb31fb927e41db89fe3732e205da59

General Update Pattern and DOM Element Select Event Handling

0 stars2🌍 Public
Fframptonb
Last edited Feb 16, 2023
Created on Feb 16, 2023

An interactive SVG scene displays a row of apples and lemons inside a bowl. D3 v5 code uses the general update pattern to add, remove, and modify circle elements over timed intervals, and the `selection.attr` API applies dynamic stroke widths to highlight the currently selected fruit via an `on('click')` handler. The `scaleOrdinal` function maps fruit types to specific colors and radii.

AI-generated description

Demonstrates DOM Select event handling with D3.js (based on tutorial by Curran Kelleher)

<iframe width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>