Bowl of Fruit - Hover to Select

Bowl of Fruit - Hover to select

Five circles representing fruit transition and scale into place in a bowl, with apples and lemons distinguished by color and radius. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouse-out. The visualization uses D3 v5’s selection merge, transition, and scaleOrdinal APIs to animate enter, update, and exit states as fruits are removed or replaced.

Hhugomell

Bowl of Fruit - Hover To Select

Five circles represent apples and a lemon in a bowl, with hovering over any fruit highlighting it with a black stroke. The code uses D3 v5 with an ordinal color scale and radius scale, binding data to SVG circles. Enter, update, and exit selections are animated via transitions over one second, while mouseover and mouseout events trigger a selection callback that re-renders the visualization.

NNita

Bowl of Fruit Hover to Select

Five circles representing apples and lemons are rendered in an SVG bowl. Hovering over a fruit highlights it with a black stroke and logs its selection. The visualization uses React and D3 v5 to animate circle positions, radii, and colors via `transition().duration(1000)`, with data mutations (apple removal, lemon replacement) triggered by timeouts, demonstrating enter, update, and exit transitions.

Ddacoylo

Bowl of Fruit - Hover to select

Five circles move into place as a bowl of fruit, alternating red apples and a yellow lemon, while hovering over any circle selects it with a black outline and animates its position and size. The example uses d3.v5’s scaleOrdinal for color and radius mappings, with circle transitions driven by the merge and transition API, and data updates via setTimeout that remove and replace elements, triggering enter, update, and exit animations.

PPabloReyesBetanzo

Bowl of Fruit - Hover to select 1

Five circles representing apples animate into a bowl, shrinking and disappearing when eaten. Hovering over a fruit selects it with a black outline. The React app uses a d3 data join with enter, update, and exit selections, transitioning radius and x-position via d3 transitions and a d3.scaleOrdinal color scale.

Jjblaskovich

Bowl of fruit - Hover to select

Five circles enter as apples with a zero radius and grow to their full size. Hovering over a fruit selects it with a black outline. The example uses d3's selection, merge, and transition APIs to animate entering, exiting, and updating circles based on a changing fruit array, with color and radius scaled by fruit type.

Jjohnwayne.jiang

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

SSophia Murage