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)

78fcade8832343f59d1f262ab126514d

Bowl of Fruit - General Update Pattern

0 stars0🌍 Public
Bbbroker
Last edited Jan 17, 2021
Created on Jan 17, 2021

This example demonstrates the general update pattern for animating SVG circles, where fruits (apples and lemons) appear as colored circles that grow, change color, and shrink when the underlying data array is modified. The visualization uses D3 v5's selection API with `.enter()`, `.merge()`, and `.exit()` methods to handle data changes, while `transition().duration(1000)` animates radius and x-position over one second. The code imports `scaleOrdinal` for color and radius mappings, and triggers updates via `setTimeout` to simulate eating and replacing fruit.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.