Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
TTomoyukiEguchi
Last edited Jan 6, 2021
Created on Jan 6, 2021

This example shows a row of fruit shapes—apples and lemons—rendered as SVG circles, where hovering over a fruit highlights it with a black outline. The bowl updates over time as fruits are removed or replaced, with animated transitions handling enter, update, and exit states. Built with D3 v5, it uses the data join pattern, `selection.enter`, `selection.merge`, and `selection.exit` with `transition.attr` to animate circle radii and positions. Color and radius are mapped using `scaleOrdinal`, and fruit IDs are stored as random numbers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example shows a bowl of fruit rendered as SVG circles, where hovering over a fruit selects it with a black outline and clicking away deselects it. The visualization uses a D3 v5 data join with enter, update, and exit transitions to animate fruit appearing and disappearing over time. Apples and lemons are distinguished through a d3.scaleOrdinal color and radius scale, while mouseover and mouseout events trigger the selection state.

Aanuj1450
95% match
Loading thumbnail…

Bowl of Fruit - Hover to select

A row of fruit circles animates as apples shrink and disappear or transform into lemons, with a black outline highlighting whichever fruit is hovered. The example demonstrates D3 v5 data joins and transitions, using `scaleOrdinal` for color and radius, plus mouse events to update a selected fruit state. SVG circles enter, update, and exit with 1-second transitions as the underlying array changes over time.

Ccornshoots
95% match
Loading thumbnail…

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

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry
95% match
Loading thumbnail…

Bowl of Fruit - Hover

A bowl of fruit displays five circles that animate into apples and lemons as they enter, resize, and exit the SVG. Hovering over a circle highlights it with a black outline, and the selection state updates the stroke accordingly. The code uses a data join with `selection.data`, `enter`, `merge`, and `exit` transitions, leveraging `transition.attr` for smooth radius and position changes. D3’s `scaleOrdinal` maps fruit types to colors and radii, while mouseover and mouseout events trigger the `setSelectedFruit` state handler.

Nnkohdatavis
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue
95% match
Loading thumbnail…

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

Bowl of Fruit - Hover to Select

A bowl of fruit is rendered as an animated SVG, where apples and lemons appear as colored circles that transition in and out of view. Hovering over a fruit selects it, highlighting it with a black stroke; moving the mouse away deselects it. The visualization demonstrates D3’s data join and general update pattern, using `selection.data`, `enter`, `merge`, and `exit` with `transition` to smoothly animate radius and position changes as the dataset is modified over time.

Rrebeccayc
95% match