Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern with labels! with D3.js!

Public visualization

Viewing a saved revision (read-only)

71e053b8575d4b1a9a58120dbe50a6a6

Bowl of Fruit - General Update Pattern with labels! with D3.js!

0 stars3🌍 Public
Fforcox43
Last edited Jul 12, 2020
Created on Jul 12, 2020

This example demonstrates the general update pattern in D3.js, showing how a static bowl of fruit changes over time as items are eaten or replaced. The visualization uses SVG rendering with React, where circles represent apples and lemons, colored and sized via `scaleOrdinal` encodings. The code animates through three distinct transitions—removing an apple, swapping an apple for a lemon, and filtering out another—using `selectAll`, `enter`, `merge`, and `exit` to manage dynamic data updates. The fruit bowl itself is a rounded rectangle, and text labels appear below each fruit, all orchestrated through the custom `fruitBowl` function called sequentially with setTimeout.

AI-generated description

A bare minimum HTML page.

See also React Starter.