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)

2f9e980d867c4c5993bff10cb07cbe93

Bowl of Fruit - General Update Pattern

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

A bowl of fruit demonstrates the D3.js general update pattern for adding, removing, and modifying SVG circles. A row of apples animates in, then one is removed, another changes into a lemon with a color and radius shift, and finally a different apple is deleted. The code uses D3 v5's `select`, `range`, and `scaleOrdinal` for styling, along with the data join methods `enter`, `merge`, `exit`, and `transition` to animate changes over one-second durations. React-style function calls manage the state updates.

AI-generated description

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