Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Nnkohdatavis
Last edited Jul 24, 2020
Created on Jul 24, 2020

A bowl of fruit shows five apples shrinking, disappearing, and one apple turning into a lemon over time, with users able to click any fruit to highlight it with a black stroke. The visualization uses D3 v5's data join with enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Clicking triggers a re-render that updates the selected fruit's stroke, and all movements animate via `transition().duration(1000)`.

AI-generated description

Bowl of Fruit - Click to Select

MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to select

A bowl of fruit shows a row of apples that users can click to select, with the chosen fruit outlined in black. The visualization demonstrates enter, update, and exit transitions as fruits are added, removed, or changed—apples shrink away, a lemon appears, and remaining fruit animates to new positions. Built with D3 v5, it uses `scaleOrdinal` for color and radius mapping, binds data by unique ID, and applies `transition().duration(1000)` for smooth size and position changes. Click interactions trigger re-renders via a callback, updating the selected state.

YYifei Liu
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 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 five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

1123fischer
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 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

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
95% match