🌍 Public
Viewing a saved revision (read-only)
2e10b7321d73495d829c7d14e7230bad
Fruit - Update Pattern - Nested
An animated SVG demonstrates a nested update pattern for fruit data, showing an array of apples that lose elements and transform one into a lemon through time-based transitions. Five circles render initially, then sequential actions remove the last fruit, change the third fruit's type, and delete another element. The visualization uses d3 transitions with a 1000ms duration for positions, colors, and radii, while exit animations shrink removed elements to zero radius over 2000ms. The code applies d3.scaleOrdinal for color and radius mappings, and d3-selection’s enter/merge/exit pattern to handle nested circle and text elements.
AI-generated descriptionLearn about update pattern - from video