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)

9b4eefbfd3b944f9bbd346577c63e13f

Bowl of Fruit - General Update Pattern

0 stars2🌍 Public
AArriannePandaraoan
Last edited Apr 21, 2020
Created on Apr 20, 2020

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit. It shows how data joins handle entering, updating, and exiting elements as apples are eaten or replaced with lemons. Using d3.scaleOrdinal for color and radius mappings, circles transition smoothly over one-second durations. The code uses d3.select, selection.data with a key function, .merge(), and transition.duration to manage state changes on an SVG canvas.

AI-generated description

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