Skip to main content
SimilarExport ZIP
100%

shrinking bowl of fruit

✓ Published3🌍 Public
MModalMBS
Last edited Sep 30, 2020
Created on Sep 28, 2020

A shrinking bowl of fruit shows eight apples in a bowl that gradually transforms: individual fruits change type to lime or lemon, shrink in radius, and disappear, while the bowl width adjusts to fit the remaining fruit. The SVG animation runs in D3 v5, using `scaleOrdinal` for color and radius mappings, `sum` for bowl width, and `transition().duration(1000)` to animate circle positions, radii, and rect width, with clicks logged to the console.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

shrinking bowl of fruit

A bowl of four apples shrinks in size as each fruit transitions to a smaller radius, with the bowl’s width adjusting to fit. Clicking an apple turns it red. The visualization uses d3 selections with data joins, ordinal scales for color and radius, and transitions on SVG circles and rectangles. The `fruitBowl` function manages enter, update, and exit states, while `d3.range` generates the initial fruit array.

MModalMBS
93% match
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
90% match
Loading thumbnail…

Ball of fruit

A bowl of fruit animation shows five apples shrinking and disappearing, with one apple transforming into a lemon and a second apple being removed entirely. The D3.js v5 and `scaleOrdinal` API map fruit types to distinct radii and colors, while the `transition().duration()` method animates the circle radii over one-second intervals. The SVG circles enter with a radius of zero, expand to their assigned size, and exit by shrinking back to zero, driven by timed `setTimeout` callbacks that mutate the fruit data array.

SSaroj Khanal
89% match
Loading thumbnail…

Bowl of Fruit - Click to select

A bowl of fruit animates as apples shrink and disappear, one apple morphs into a lemon, and another apple is removed entirely, with each change triggered by scripted timeouts. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition()` API to smoothly interpolate circle radii, fill colors, and group transforms over one-second durations. The custom `fruitBowl` function handles enter, update, and exit states for both circle and text elements, while a pink rectangle serves as the bowl. Fruit position and radius depend on index and type, encoded through ordinal scales for color and size.

Fforeverworld1879
89% 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
89% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates through a sequence of five apples that shrink, change type, and disappear over time. The visualization demonstrates how SVG circle elements are added, updated, and removed using D3's enter, merge, and exit selections. Each fruit's color and radius come from `scaleOrdinal` color and size scales, while a `transition().duration(1000)` animates the circles' growth, movement, and removal. The React app drives the state changes through timed `setTimeout` calls, and the `fruitBowl` function handles the animated rendering.

Ccacho2294
88% 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
88% match
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
87% match