Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit — General Update Pattern + Transitions

Public visualization

Viewing a saved revision (read-only)

9ab812ac3d6f4d838748f4e6fab1c824

Bowl of Fruit — General Update Pattern + Transitions

0 stars2🌍 Public
MMuhammad Jarir Kanji
Last edited Dec 16, 2020
Created on Dec 15, 2020

A bowl of fruit animates through the D3 general update pattern, demonstrating enter, update, and exit selections with smooth transitions. Apples and lemons appear as colored circles, scaling radius and shifting horizontally as items are added, removed, or change type over time. The example uses d3-selection's `selectAll`, `data`, `merge`, and `exit` methods, along with `transition().duration()` to animate SVG circle attributes. A color scale and radius scale map fruit types to visual properties, while randomly generated IDs track elements across updates.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.