Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern

Public visualization

Viewing a saved revision (read-only)

6daa1fe941284f54a8b27d1a2bc065f4

Bowl of Fruit - General Update Pattern

0 stars0🌍 Public
JJun Yi | Dylan
Last edited Dec 26, 2019
Created on Dec 26, 2019

This example demonstrates the general update pattern for data joins in D3.js, showing how fruit elements enter, update, and exit within an animated SVG bowl. Apples and lemons are rendered as colored circles with labels, transitioning smoothly as fruits are removed or replaced over timed intervals. The code uses D3 v5 selections with `data()`, `enter()`, `merge()`, and `exit()` to manage DOM elements, employing `scaleOrdinal` for color and radius mapping and `transition().duration()` for animations.

AI-generated description

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