Fork of Bowl of Fruit - Hover to Select

Bowl of Fruit - Hover to select

A bowl of fruit rendered as circles animates through a sequence of changes: fruits disappear, and one apple transitions into a lemon. Hovering over any fruit selects it, displaying a black outline until the mouse moves away. The example uses d3-selection with data joins and transitions to animate circle radii and positions, while d3-scaleOrdinal maps fruit types to colors and sizes. The application state manages a selected fruit ID and triggers re-renders through a custom `fruitBowl` function.

CChinzorigt Ganbat

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

TTimothy sit

Fork of Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

AAnthony Zornig

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch

Bowl of Fruit - Hover to Select

A bowl of five apples animates in from the center, expanding to their positions. Hovering over any fruit outlines it in black, with a mouseout clearing the selection. Over a few seconds, apples are removed and one is transformed into a lemon, with the scene re-rendering via a D3 `select` and custom `fruitBowl` function. The SVG circles use D3's `scaleOrdinal` for color and radius, `transition().duration(1000)` for smooth changes, and event handlers `on('mouseover')` and `on('mouseout')` to trigger selection state updates.

Zzlastefcia

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

Fork of Fork of Fork of Bowl of fruit - with hover selection

A bowl of fruit shows apples and lemons as scaled circles that animate in and out as items are added or removed. Hovering over a fruit selects it, highlighting it with a black stroke. The example demonstrates data joins and transitions using d3.selectAll, selection.merge, and selection.exit, with d3.scaleOrdinal for color and radius mapping. Animated updates occur via transition.attr over one second, triggered by setTimeout calls that pop, replace, or filter the fruit array.

Cceresfin