Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Clicking is life

✓ Published1🌍 Public
Ddaanasma
Last edited May 1, 2020
Created on May 1, 2020

A bowl of fruit rendered as SVG circles changes over time: apples are eaten, one becomes a lemon, and a melon arrives. Clicking a fruit selects it with a black outline, while hovering highlights it with increased opacity. The animation uses d3 transitions to grow and shrink circle radii, with d3.scaleOrdinal mapping fruit types to colors and sizes. Data updates are driven by timed JavaScript events and user interactions through D3 event handlers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

Ffeizhi123
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic SVG shows a bowl of fruit where apples and lemons animate in and out as data updates. Clicking any fruit selects it, highlighting it with a black stroke. The code uses d3.scaleOrdinal for color and radius mappings, with d3 transitions animating circle positions and radii over one second. Predefined setTimeout events remove apples, mutate one apple into a lemon, and filter out another fruit to demonstrate enter, update, and exit selections.

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

Bowl of Fruit (Click to Select)

Circles representing apples and lemons animate into a bowl-like row, with each fruit shrinking or disappearing as data updates over timed intervals. Clicking any circle selects it, highlighting its stroke in black. The example uses D3 v6 with `scaleOrdinal` for color and radius mapping, and combines enter, merge, and exit selections with 1000ms transitions. SVG rendering and click handlers drive the interactive state changes.

BBKirst3
93% match
Loading thumbnail…

Bowl of Fruit - Click event

A bowl of five apples is rendered as SVG circles, with click events selecting a fruit and highlighting it with a black stroke. The data-bind updates smoothly through animated transitions: apples shrink and disappear when eaten, and the third apple morphs into a lemon with a color and size change. Using d3-v5, the code employs scaleOrdinal for color and radius mapping, selection.merge for updating, and transition().duration() to animate enter, update, and exit states.

Rrintisch
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps
93% match