Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Bowl of Fruit - General Update pattern (text)

Public visualization

Viewing a saved revision (read-only)

672f95e889bf4e3ba9d5a7b9215e960f

Fork of Bowl of Fruit - General Update pattern (text)

0 stars0🌍 Public
KKaleb LaBarrie
Last edited Sep 13, 2021
Created on Sep 10, 2021

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit that changes over time. It shows how data joins manage entering, updating, and exiting SVG elements—apples are eaten, one apple turns into a lemon, and positions shift with each render cycle. The code uses d3-scale’s `scaleOrdinal` for color and radius mapping, while transitions animate circle sizes and repositions groups after each state change. Rendered as SVG, the bowl is a static rectangle, and text labels identify each fruit type.

AI-generated description

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