Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern

Public visualization

Viewing a saved revision (read-only)

625d42309ac04cb3b19566a743dc98ba

Bowl of Fruit - General Update Pattern

0 stars2🌍 Public
Hhirokat
Last edited Sep 8, 2020
Created on Sep 4, 2020

This example demonstrates the general update pattern for data joins in D3, showing how circles representing fruit are added, removed, and modified over time. Five apples render initially, then one is eaten, an apple is replaced with a lemon, and another apple is removed via timed `setTimeout` calls. The `fruitBowl` function uses `selection.data`, `enter`, `merge`, and `exit` to handle three states, with `d3.scaleOrdinal` mapping fruit types to colors and radii. The SVG circles update smoothly without transitions, using d3.v5 and ES6 module imports.

AI-generated description