Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Click to select

✓ Published1🌍 Public
Jjlongwellchc
Last edited Sep 18, 2019
Created on Sep 17, 2019

Five pieces of fruit sit in a bowl; clicking an apple or lemon selects it with a black outline. Over time, apples are eaten and one is replaced by a lemon, using enter, update, and exit selections with animated transitions. The example uses d3.scaleOrdinal for color and radius, and d3's selection.data with key functions to manage the changing array.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to select

Five pieces of fruit sit in a bowl, where clicking an item selects it with a black outline. The bowl updates over time as fruits are removed and one apple changes into a lemon, with transitions animating position and radius. Built with D3 v5, the example uses `scaleOrdinal` for color and size, data joins with enter/exit selections, and `transition` for smooth updates.

TThomas Seberechts
96% 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

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 pieces of fruit sit in a bowl, rendered as SVG circles with varying radii and colors via d3.scaleOrdinal. Clicking a fruit selects it, highlighting the chosen item with a black stroke. D3's data join and transition system animate the fruits' positions and sizes as apples are removed, replaced by a lemon, or filtered over time.

WWhitney Hung
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

MMichał Szumnarski
94% match
Loading thumbnail…

Bowl of Fruit - click to select

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure
94% match