Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
BbeauMarko
Last edited Oct 2, 2020
Created on Oct 2, 2020

Five pieces of fruit sit in a row, rendered as SVG circles. Clicking any piece toggles a black selection ring around it, and the bowl animates over one second: apples shrink to nothing and disappear, a lemon grows in place, and the remaining items slide to new positions. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mapping, and `transition().duration(1000)` to animate enter, update, and exit states.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, rendered as SVG elements in React with D3 v5. Clicking a fruit highlights it with a gray outline while its color and radius animate through `transition().duration(1000)`, mapping apple and lemon types via `scaleOrdinal` color and radius scales. The data join uses a key function for object constancy, and exit transitions shrink circles to radius 0 before removal as fruits are eaten or replaced over time.

Vvic126
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row inside an SVG bowl; clicking a fruit highlights its outline in black. The view updates when a piece is removed or one apple changes into a lemon. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and chained `transition()` calls to animate entering, exiting, and resizing circles. Clicking triggers a callback that re-renders the bowl via the exported `fruitBowl` function.

Ffernandotsurukawa
95% match
Loading thumbnail…

Bowl of Fruit Click to Select 2

Five fruit circles in an SVG bowl transition between apple and lemon states, with hover highlighting that selects a fruit by turning its stroke black. The visualization uses D3 v5's `scaleOrdinal` for color and radius mapping, while `selection.enter` and `exit` manage animated transitions as fruits are removed or changed. The React framework orchestrates state updates through an `onClick` handler, triggering re-renders that shift positions along an x-axis and apply 1000-millisecond duration transitions to circle attributes.

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

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that shrink away, change to lemons, and are removed. Clicking any fruit selects it, highlighting it with a black outline. Updates use D3 v5 data joins with `enter`, `merge`, and `exit`, relying on ordinal scales for color and radius. All position and size changes animate over one second via `transition().duration(1000)`.

ZZ-Richard
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select.js

Five fruit circles sit in a beige bowl shape rendered as an SVG rectangle with rounded corners. Clicking any piece of fruit selects it, highlighting that fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for fruit color and radius, `selection.data` with a key function for enter/update/exit transitions, and `transition.duration` to animate fruit removal or type changes from apple to lemon after timed delays.

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

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.
94% match