Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

General Update Pattern and DOM Element Hover Event Handling

Public visualization

General Update Pattern and DOM Element Hover Event Handling

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

This interactive D3 v5 visualization demonstrates the general update pattern with SVG rendering, showing a bowl of fruit that changes over time. The code uses `selection.merge()` and key-based data binding to manage enter, update, and exit states, while `d3.scaleOrdinal` maps fruit types to colors and radius values. Mouse events on circles trigger hover highlighting, with the `setSelectedFruit` function updating a selected fruit’s stroke to black. Timed updates pop apples, replace one with a lemon, and filter items, all re-rendering through the reusable `fruitBowl` module.

AI-generated description

Demonstrates unidirectional data flow with the DOM Hover event handling with D3.js (based on tutorial by Curran Kelleher)

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

Comments

Sign in to join the discussion.

MIT Licensed