Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
YYF
Last edited Oct 1, 2018
Created on Sep 21, 2018

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Click to Select

A bowl of fruit demonstrates click-to-select interactions with animated enter, update, and exit transitions. Five apples render as scaled SVG circles via a custom `fruitBowl` module, which uses `scaleOrdinal` for color and radius mappings. Clicking a fruit triggers an `onClick` handler that updates a `selectedFruit` identifier, applying a black stroke highlight. Timed updates replace an apple with a lemon, remove fruits, and re-render using `transition().duration(1000)` with `merge` and `remove` on circle selections.

Bbprokopowicz
96% match
Loading thumbnail…

Bowl of Fruits - Click to Select

A bowl of fruit displays apples and lemons as colored circles, with the currently selected fruit highlighted by a black outline. Clicking any fruit triggers a transition that animates its radius and position, while removed fruits shrink and exit. The example uses D3 v5’s data joins with `selection.enter`, `merge`, and `exit` methods, alongside `scaleOrdinal` for color and size, and `transition.duration` for smooth animations. The `fruitBowl.js` module manages the interactive selection logic, while `index.html` loads the SVG container and D3 bundle.

YYasara Peiris
96% match
Loading thumbnail…

Bowl of Fruit-Click to Select.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

NNeepaB
95% match
Loading thumbnail…

Bowl of Fruit - Click To Select

A circular fruit bowl displays apples and lemons that users can click to select, with the chosen fruit highlighted by a thick black stroke. The visualization uses D3.js ordinal scales for color and radius mapping, and animated transitions smoothly resize circles on entry or exit when fruits are removed or replaced. The example animates data changes over time, showing apples being eaten and one apple transforming into a lemon, while maintaining click-based selection throughout the updates.

NNita
95% match
Loading thumbnail…

Bowl Of Fruits-ClickToSelect

A bowl of fruit demonstrates click-to-select interaction and dynamic data updates using D3.js. Circles represent apples and lemons, with a black stroke highlighting the selected fruit. The visualization animates transitions when fruits are removed or change type, using D3's `scaleOrdinal` for colors and radii, and `selection.transition()` for smooth updates. The code employs `selectAll`, `data`, `enter`, `merge`, and `exit` patterns to manage DOM elements, with click handlers triggering re-renders via an `onClick` callback.

MMahaveer Jain
95% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

BBrett
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in an animated bowl, rendered as circles whose radius and fill come from d3.scaleOrdinal based on fruit type. Clicking an apple or lemon triggers an onClick handler that sets the selected fruit, which receives a thick black stroke via a data join and transition. The example also demonstrates enter, update, and exit selections by removing apples and changing one apple to a lemon at timed intervals, all using d3.transition for smooth radius and position animations.

JJordan Chiu
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan
95% match