Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - click to select

✓ Published2🌍 Public
1123fischer
Last edited Nov 19, 2020
Created on Nov 19, 2020

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.

AI-generated description

body{ margin: 0px; overflow: hidden; }

MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez
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 Fruit - Click to select

Five pieces of fruit sit in a bowl as colored circles, each clickable to select and highlight with a black stroke. As time passes, apples are removed, and one apple changes into a lemon, demonstrating data joins with enter, update, and exit selections. The visualization uses d3.scaleOrdinal for color and radius mapping, and d3 transitions animate the circle radii over one second. The code relies on d3 v5 and SVG rendering.

NNikki-gea
95% match
Loading thumbnail…

Bowl of fruit - click to select

Five apples animate into a bowl, and clicking one selects it with a black stroke. The bowl uses d3's scaleOrdinal for color and radius mapping, with transition animations for enter, update, and exit states. Over time, apples are removed and one is replaced by a lemon, demonstrating dynamic data updates. The example uses d3 v5 with SVG rendering and a custom fruitBowl component.

BbeauMarko
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

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)`.

Nnkohdatavis
95% match