Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of fruit nested animated

Public visualization

Viewing a saved revision (read-only)

2a6a3e75502d4ae69dae92b229d878b0

Bowl of fruit nested animated

0 stars1🌍 Public
MMatan
Last edited Nov 9, 2020
Created on Nov 9, 2020

A bowl of fruit demonstrates D3 data joins with animated enter, update, and exit transitions. Apples and lemons render as colored circles with scaled radii, positioned based on array index. The code uses `selection.data()` with a key function, `enter().append()`, `merge()`, and `exit().remove()` to manage SVG groups. Timed `setTimeout` calls alter the fruit array, triggering smooth 1000ms transitions that slide fruits to new positions while updating circle attributes and text labels.

AI-generated description

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