Fruit Bowl - Click To Select

100%

Fruit Bowl - Click To Select

✓ Published1🌍 Public

Last edited Jan 29, 2020

Created on Jan 29, 2020

Five pieces of fruit sit in a simple bowl, rendered as SVG circles with labels. Clicking a fruit selects it, giving it a black outline. Through scheduled re-renders, fruit types change, fruits are removed from the end, and a new lemon is prepended, with exit animations shrinking removed circles. The code uses d3-selection’s data join, d3-transition for animated radius changes, and d3-scaleOrdinal for color and size mapping.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

MMukund Khandelwal

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

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

Five circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

Ccyro666

94% 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

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