Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Bowl of Fruit - General Update Pattern w/ Nested Animation Transitions

Public visualization

Viewing a saved revision (read-only)

7a0f2517f4444f938f3243f91b8af5f9

Fork of Bowl of Fruit - General Update Pattern w/ Nested Animation Transitions

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

This example demonstrates D3’s general update pattern with nested transitions by animating a bowl of fruit as apples are removed, replaced by lemons, and filtered out. It shows how the `enter`, `update`, and `exit` selections handle DOM creation, modification, and removal, using `selection.merge()` to apply shared attributes to groups, circles, and text. The code leverages d3.scaleOrdinal for color and radius mappings, and updates the SVG via timed `setTimeout` calls. The bowl is drawn as a static rectangle, with fruit rendered as SVG circles and labels.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by taking advantange of the D3 .enter, .update and .exit events/update patterns when creating, updating and removing circles. This also incorporates D3 Animated Transitions and deals with Object Constancy (based on tutorial by Curran Kelleher)

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