Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to select

✓ Published0🌍 Public
Fforeverworld1879
Last edited Mar 15, 2020
Created on Mar 15, 2020

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.

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

Bowl Fruit - Click to select

A bowl of fruit shows five apples as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization animates changes: after two seconds one apple is eaten, after three seconds an apple becomes a lemon, and after four seconds another apple disappears. Using d3.v5, the fruitBowl function manages enter, update, and exit selections, applying `transition.attr` to animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes.

JJefferson Abreu
94% match
Loading thumbnail…

Bowl of fruit!

A bowl of fruit animates as apples and lemons appear, shrink, and disappear in a horizontal row. The visualization uses D3 v5 with an SVG renderer, binding data to circles and applying ordinal scales for color and radius based on fruit type. Updates trigger via `setTimeout`, modifying the array and re-rendering, with enter, update, and exit selections transitioning circle attributes like `cx` and `r` over one-second durations.

Yylzami40
94% match
Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich
93% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski
93% match
Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit
93% match
Loading thumbnail…

Bowl of Fruit: Animated Transitions

A bowl of fruit demonstrates animated transitions as apples disappear and one transforms into a lemon over time. The visualization uses D3 v5 with an SVG rendering approach, employing scaleOrdinal for color and radius mappings. The fruitBowl function manages the enter, update, and exit states of grouped circles and text labels, while the index script uses setTimeout to trigger sequential data modifications.

MMounikaBeerelly
93% 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
93% match