Bowl of Fruit

100%

Bowl of Fruit — Nested Elements + Transitions

✓ Published0🌍 Public

Last edited Dec 16, 2020

Created on Dec 16, 2020

Forked from Bowl of Fruit — Nested Elements

Five apples in a bowl animate over two seconds using d3.v5 transitions. The fruitBowl function selects `g` elements, updates circle radii and fill colors via `scaleOrdinal` color and radius scales, and animates transforms to reposition items when apples are removed or replaced with a lemon. Exiting elements translate downward and shrink to zero radius before removal.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Nested Elements with Transitions

Five apples enter a bowl as circles with a smooth transition, then shrink and disappear as the fruit is eaten, while one apple turns into a lemon and changes color and size. The d3.v5 code uses a data join with enter, update, and exit selections, nesting circles and text inside groups. Transitions animate radius changes, and exit transitions shrink circles before removal, with scaleOrdinal mapping fruit types to colors and radii.

Bbprokopowicz

95% match

Loading thumbnail…

Bowl of fruit - nested and with transition

A bowl of fruit demonstrates nested SVG group elements and animated transitions. Five apples initially render in a row, with each fruit represented as a group containing a circle and a text label. At one-second intervals, an apple disappears, an apple transforms into a lemon, and the second apple is removed. D3's data join with key functions tracks fruits by unique IDs, while `transition().duration(1000)` animates position changes on exit. Scales map fruit types to colors, radii, and stroke styles.

Uumihito

94% match

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five apples sit in a silver bowl. Over four seconds, the apples disappear one at a time, and one turns into a lemon, with each change animated by shrinking or recoloring the fruit circles. The example uses d3’s `selectAll`, `transition`, and `scaleOrdinal` APIs to map fruit type to color and radius. Fruit data is generated in JavaScript with `range` and `Math.random()`, and the SVG rendering updates through the custom `fruitBowl` export.

Vveagy

94% match

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five circles representing apples and lemons transition smoothly in a bowl-shaped arrangement, shrinking and disappearing when eaten or expanding when added. Using D3 v5 with SVG, the `fruitBowl` function binds data by ID and applies `transition().duration(1000)` to animate radius and x-position, with `scaleOrdinal` determining color and size. Data updates occur via `setTimeout` calls that mutate the fruit array.

YYan Yan

94% match

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five apples in a row transition into a changing fruit bowl as a timer script removes fruits and swaps one apple for a lemon. The D3 v5 code uses a custom `fruitBowl` function with data joins and `transition().duration(1000)` to animate circle radius, position, and fill color via ordinal color and radius scales. SVG circles enter at radius zero and exit by shrinking, creating smooth morphing effects.

CChenluWang96

94% match

Loading thumbnail…

A bowl of fruit demonstrates animated transitions in D3. The visualization shows five apples rendered as red circles, with one apple turning into a lemon over time and two apples disappearing. The code uses D3 v5's data join, `scaleOrdinal` for color and radius mapping, and `selection.transition` to animate circle radius changes. SVG circles are bound to fruit objects with unique IDs, and exit transitions shrink shapes to zero before removal.

Aaurelio-89

93% match

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five circles representing apples render in an SVG bowl. Through timed interactions, one apple disappears, a second apple changes into a lemon, and a third apple is removed, with all changes animated. The code uses D3 v5’s `select`, `selectAll`, `transition` and ordinal `scaleOrdinal` for color and radius. Explicit `attr` tweens over 1000 milliseconds animate the circle positions, radii, and exits, while `remove()` deletes exiting circles.

Vveagy

93% match

Loading thumbnail…

Bowl of Fruit: Animated Transitions

Five circles representing apples appear in a row, rendered as SVG circles with a red fill. Over two seconds, one fruit is removed and a middle apple transitions to a lemon, changing its color to yellow and shrinking its radius. The example uses d3 v5 with selection joins, `.enter()`, `.exit()`, and scaleOrdinal for color and size mappings, demonstrating basic animated data updates.

JJonathan

93% match