Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fruit - Update Pattern - Nested

Public visualization

Fruit - Update Pattern - Nested

0 stars3🌍 Public
LLeora Wenger
Last edited Dec 4, 2018
Created on Nov 29, 2018

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 description

Learn about update pattern - from video

Comments

Sign in to join the discussion.

MIT Licensed