D3 Animation - Bowl of Fruit - Bowl

100%

D3 Animation - Bowl of Fruit - Bowl

✓ Published0🌍 Public

Last edited Jun 23, 2022

Created on Jun 19, 2022

Forked from D3 Animation - Bowl of Fruit - Nested Version

This example animates a bowl of fruit as apples are eaten, replaced with lemons and watermelons, and added over time using D3’s data join with enter, update, and exit selections. Each fruit moves smoothly to a new horizontal position via `transition().duration()` and updates its color, size, and label based on a `scaleOrdinal` mapping. Rendering is done with SVG circles and text inside a rectangular bowl, driven by timers that mutate the array and re-render the scene.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit

Animating a bowl of fruit, this example demonstrates D3’s enter, update, and exit pattern on SVG circles. Apples and lemons, distinguished by red and yellow fills, shrink and expand their radii over one-second transitions as items are removed, replaced, or changed. The code uses `d3.scaleOrdinal` for color and size, `selection.data` with an id accessor, and chained `transition().attr` calls to morph circle properties.

BBKirst3

93% match

Loading thumbnail…

D3 Animation - Bowl of Fruit - Nested Version

A bowl of fruit undergoes a sequence of animated changes: fruits are eaten, replaced, and added over time. Each fruit is a circle with a label, colored and sized by its type via `d3.scaleOrdinal`. The `fruitBowl` function uses D3's declarative transitions (`transition().duration()`) to animate position, radius, and removal, taking data from a static CSV.

YYoung Song

93% match

Loading thumbnail…

D3 Animation - Bowl of Fruit

A bowl of fruit demonstrates animated data updates and mouse-based selection in SVG. Circles represent fruit types, with color and size mapped through ordinal scales. The animation uses `transition().duration()` to smoothly move and resize marks as items are added, removed, or changed over time. Hovering highlights a fruit with a black stroke, and the `fruitBowl` function manages enter, update, and exit transitions for circles and labels.

YYoung Song

92% match

Loading thumbnail…

Bowl of Fruit

This example demonstrates animated updates to a bowl of fruit using D3’s data join. Circles representing apples shrink to zero when removed, while a middle apple transitions into a lemon with a new color and radius. The fruitBowl function uses `scaleOrdinal` for color and size, and `transition().duration(1000)` for smooth movements. The React-based setup renders SVG circles, with state changes triggered by `setTimeout` to eat or replace fruit.

Ddacoylo

92% match

Loading thumbnail…

Bowl of fruit nested animated

A bowl of fruit demonstrates D3 data joins with animated enter, update, and exit transitions. Apples and lemons render as colored circles with scaled radii, positioned based on array index. The code uses `selection.data()` with a key function, `enter().append()`, `merge()`, and `exit().remove()` to manage SVG groups. Timed `setTimeout` calls alter the fruit array, triggering smooth 1000ms transitions that slide fruits to new positions while updating circle attributes and text labels.

MMatan

92% match

Loading thumbnail…

Bowl of Fruit

D3.js renders an animated bowl of fruit where apples and lemons appear, transform, and disappear in a circular arrangement. The visualization demonstrates the general update pattern: entering elements fade and scale in, updating elements shift positions, and exiting elements shrink and fade out. Clicking a fruit highlights it with a black stroke. The code uses `scaleOrdinal` for color, radius, and font sizing, `transition().duration()` for animation, and data joins on `g` elements. Fruits are generated randomly and mutated through timed `setTimeout` events.

Aala-wahibi

92% match

Loading thumbnail…

bowl fruit 2

A bowl of fruit animates as apples and a lemon are added, removed, and transformed over time. Using D3 v5’s selection and transition APIs, each fruit is rendered as an SVG `<circle>` with a label, while a rounded `<rect>` forms the bowl. The example demonstrates enter, update, and exit states as the dataset changes, with a one-second transition interpolating position and radius. Fruit types map to fixed colors and sizes, and the code explicitly merges newly created and existing groups to manage state.

Ppei9223

92% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit demonstrates animated enter, update, and exit transitions for SVG circles representing apples and lemons. Five apples initially render, then one is removed, another changes to a lemon, and a third disappears, with each change animating radius and position over one second. The example uses d3.select and d3.range to generate data, and a custom fruitBowl function with d3.scaleOrdinal for color and radius, plus selection.merge and selection.exit with transition.duration.

AAndrewRiceMGW

92% match