Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - click to select

✓ Published0🌍 Public
VVamsiYandapalli
Last edited Dec 8, 2021
Created on Dec 7, 2021

A bowl of fruit displays five apples as red circles that are transformed over time; one apple is eaten, another is replaced by a lemon, and a third is removed, with each change animated via a 1000ms transition. Clicking any circle logs its unique ID to the console. The visualization uses D3 v7’s `scaleOrdinal` for color and radius mappings, `selection.data` with key functions, and `transition.attr` to animate circle positions and sizes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruits - Click

A bowl of five apples is shown as colored circles, which can be clicked to select a fruit and highlight it with a black outline. Over time, the apples are eaten, replaced with a lemon, and eventually rot, changing their color and radius with animated transitions. Built with D3 v5, the visualization uses `scaleOrdinal` for color and radius mapping, `selection.data` with a key function for updates, and chained `transition` calls to animate enter, update, and exit states.

Nnikeshkv
95% match
Loading thumbnail…

Bowl of fruit - click to select

A bowl of fruit displays five apples as red circles, which users can click to highlight with a black stroke. Over time, apples disappear and one transforms into a lemon, demonstrating dynamic data updates. The visualization uses D3 v5 with a modular import of `scaleOrdinal` for color and radius scales, while `select`, `range`, and `transition` handle SVG circle creation, removal, and animated resizing. Selection state triggers re-rendering via a callback, showcasing enter, update, and exit patterns.

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

Bowl of Fruit - click to select

A bowl of fruit shows five apples and lemons as colored circles that users can click to highlight with a black stroke. The visualization demonstrates animated enter, update, and exit transitions as fruits are eaten and replaced over time. Built with D3 v5, it uses ordinal scales to map fruit types to fill colors and radii, while selection joins and `transition().duration()` handle the smooth size and position animations.

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

Bowl of Fruit - Click to select

Five apples sit in a bowl, each clickable to toggle a black selection outline. Over time, the dataset changes as fruits are removed and one apple transforms into a lemon, with all updates animated via D3 v5 transitions. The visualization uses d3.scaleOrdinal for color and radius, binds data through selection joins, and applies 1-second transition tweens to reposition groups and resize circles. Click events are handled with D3's event naming system, and SVG shapes render the bowl and fruit.

RRohit Reddy Gottam
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples as red circles with a black stroke on the selected piece. Clicking any fruit selects it, and the visualization animates changes over time: a fruit is removed after one second, a fruit’s type changes from apple to lemon after two seconds (changing its color and radius via d3.scaleOrdinal scales), and another fruit is filtered out after three seconds. The code uses d3-selection with data joins, transitions on circle attributes (cx, r, stroke), and click event handlers to update the selection state.

NNico Donovan
94% match