Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern

Public visualization

Bowl of Fruit - General Update Pattern

0 stars0🌍 Public
JJake
Last edited Jun 30, 2020
Created on Jun 25, 2020

This example demonstrates the D3.js general update pattern with an animated bowl of fruit, showing apples and lemons as circles with color-coded fills. The code uses `selection.data()`, `selection.enter()`, and `selection.exit()` to manage joining data to SVG elements, with `transition().duration(500)` animating circle radii and text positions on updates. A `scaleOrdinal` maps fruit types to colors and sizes, while timed `setTimeout` calls trigger sequential data mutations—removing items, changing types, and adding fruits—to illustrate enter, update, and exit transitions. The rendering relies on D3 v5 within a React framework, using SVG and explicit animation transitions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed