Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern Special Cases

Public visualization

Viewing a saved revision (read-only)

bfd0ecfe64e84a9ea6a624a1c334dcf4

Bowl of Fruit - General Update Pattern Special Cases

0 stars0🌍 Public
DDaniel
Last edited Aug 7, 2019
Created on Jul 31, 2019

This example demonstrates the general update pattern in D3, focusing on special cases when data elements are added and removed. As apples are bought and eaten, the visualization animates new fruit entering the bowl while existing fruit exits, with circles and text labels scaling down before removal. The bowl itself resizes to accommodate the changing number of fruits. The code uses D3 v5 APIs including `selection.selectAll`, `.enter()`, `.merge()`, `.exit()`, and transitions with `.duration()`. It renders to SVG with ordinal scales mapping fruit types to colors and radii, with a timeout delaying the bowl’s width adjustment.

AI-generated description