Bowl of fruits

100%

Bowl of fruits

✓ Published1🌍 Public

Last edited Dec 17, 2020

Created on Dec 16, 2020

Five fruit shapes sit in a row and animate as apples are eaten or replaced by lemons. D3 transitions move the fruit groups horizontally, shrink removed fruit circles to zero radius, and grow new circles on arrival. The example uses `d3.select`, `scaleOrdinal` for color and radius, and the enter/update/exit pattern with `transition().duration()` to choreograph the changes over time.

AI-generated description

SVG HTML

Exercice : Add transition!

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Animated

Five apples in a row shrink and disappear as a lemon slides into place among them. D3's `scaleOrdinal` maps fruit type to radius and color, while `transition().duration(1000)` animates each shape's size and horizontal position. A `merge` handles both entering and updated circles, and `exit` removes circles by shrinking them to zero radius.

Ssakhabutdinov

94% match

Loading thumbnail…

Bowl of Fruit

Five pieces of fruit sit in a row, with apples and lemons distinguished by red and yellow fills and differing radii. The animation shows apples being eaten, a lemon replacing an apple, and another apple disappearing. The piece is built with D3 v6, using `scaleOrdinal` for colors and radii, and `transition().duration(1000)` to animate circle attributes. SVG circles are appended, merged, and removed via `selection.selectAll` and the `fruitbowl` function.

Wwei

94% match

Loading thumbnail…

Bowl of Fruit

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

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

93% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit shows five apples rendered as red circles, which are eaten and replaced by a lemon over time through animated transitions. The visualization uses D3 v5’s general update pattern with `selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG circle elements, applying ordinal scales for color and radius based on fruit type. The animation sequence, driven by `setTimeout`, demonstrates adding, removing, and updating data while smoothly interpolating circle radius and position via `transition`.

Rrebeccayc

93% match

Loading thumbnail…

Bowl of fruit

Five circles represent fruit in a bowl, with apples as red and lemons as yellow, animating their radius and horizontal position over one second. The demo uses d3 v5 with `scaleOrdinal` for color and size mapping, while `selection.enter`, `merge`, and `exit` handle data joins. A timed sequence eats apples by removing elements and swaps one apple for a lemon, showing transitions with `transition.duration`.

PPedro Ernesto Tramontina

93% match

Loading thumbnail…

Bowl of Fruit — Nested Elements + Transitions

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.

MMuhammad Jarir Kanji

93% match

Loading thumbnail…

Bowl of fruit - animated transitions

A row of apples and one lemon sit atop an SVG bowl, with each fruit drawn as a colored circle. The example demonstrates animated transitions as fruits are eaten or replaced: exiting circles shrink to zero radius, while new or changed fruits grow to their target size with color and radius updates. It uses D3 v5's data join, `transition().duration(1000)`, and ordinal scales for color and radius, with `Math.random()` generating fruit IDs.

HHasideluxe

93% match