Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - General Update Pattern w/ Basic Animated Transitions

Public visualization

Viewing a saved revision (read-only)

25570256a255459da0a53678d00d2cc5

Bowl of Fruit - General Update Pattern w/ Basic Animated Transitions

0 stars1🌍 Public
Fframptonb
Last edited Feb 16, 2023
Created on Feb 14, 2023

This example demonstrates the D3 general update pattern by animating a bowl of fruit represented as colored circles. Apples and lemons appear, change type, and disappear from an SVG canvas, with smooth transitions adjusting position and radius over one second. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` alongside `transition().duration()` to manage object constancy based on unique IDs. The `scaleOrdinal` maps fruit types to colors and sizes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by taking advantange of the D3 .enter, .update and .exit events/update patterns when creating, updating and removing circles. This also incorporates D3 Animated Transitions and deals with Object Constancy (based on tutorial by Curran Kelleher)

<iframe width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>