Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Final

✓ Published1🌍 Public
MMunTatt Yap
Last edited Aug 12, 2019
Created on Aug 7, 2019

A bowl-shaped container holds a sequence of fruit, initially five apples, which are animated in and out of existence. The visualization demonstrates D3's enter, update, and exit lifecycle transitions, as apples are removed and one apple is changed into a lemon, triggering smooth radius and color changes. Built with D3 v5's scaleOrdinal for categorical colors and radii, the SVG elements (circles and text) are repositioned and transitioned over one second, with exiting fruit shrinking and being removed from the scene.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
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 - Click to Select

A bowl of fruit shows five apples in a rounded rectangle, with smooth animated transitions as fruits are removed, a lemon replaces one apple, and another apple exits. Each fruit is a circle colored by type and sized by a d3.scaleOrdinal, with a click handler that toggles a black stroke on the selected fruit. The visualization uses D3 v5 with data joins, enter/update/exit patterns, and transition durations to animate position, radius, and fill changes in SVG.

EEdward-Elric233
92% 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
92% match
Loading thumbnail…

Bowl of fruits

A bowl of five apples animates through a sequence of changes: one apple is eaten, a second is replaced by a lemon, another is eaten, and a final apple rots. The visualization uses D3 v5 with an ordinal color scale mapping fruit types to red, yellow, and brown, and an ordinal radius scale for size. Each fruit is an SVG circle, and transitions are animated over one second using D3's transition API. The data is generated randomly in JavaScript and rendered within an SVG canvas.

Nnikeshkv
92% 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
92% 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
92% match