Skip to main content
SimilarExport ZIP
100%

Bowl of fruits - hover to select

✓ Published1🌍 Public
Aarieltonglet
Last edited Oct 1, 2019
Created on Sep 30, 2019

A bowl of fruits demonstrates animated enter, update, and exit transitions for SVG elements. Apples and lemons are rendered as colored circles with labels, and hovering over a fruit triggers a callback to select it, drawing a black stroke. The example uses D3.js v5 selections, data joins, and `transition()` methods to smoothly move, resize, and fade fruits as the dataset changes over time via `setTimeout`. Color and radius are mapped by fruit type using `d3.scaleOrdinal`.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Hover to select

A bowl of fruit demonstrates animated SVG transitions and mouse interaction. Five circles, initially apples, move, resize, and change color over time; one apple becomes a lemon, and fruits are removed. Hovering over any circle highlights it with a black stroke and updates a `selectedFruit` state, triggering a re-render. The example uses D3 v5's `select`, `scaleOrdinal`, and `transition` APIs, rendering with SVG and animating circle radius, color, and position over one-second durations.

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

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
Loading thumbnail…

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

Bowl of Fruit - Hover to select

A bowl of fruit demonstrates enter, update, and exit selections with animated transitions. Hovering over a circle highlights it with a black stroke and triggers a callback to update the selected state. Using d3.v6, the fruitBowl function maps apple and lemon types to radii and colors via scaleOrdinal, while transitions animate radius and position changes over one second.

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

Interactive fruit bowl shows a row of apples and lemons rendered as SVG circles, where hovering highlights a fruit with a black outline. The example uses D3 v5’s data join with `merge` and `exit` to animate size and position changes via `transition`. Color and radius are mapped by fruit type using `scaleOrdinal`, while mouseover and mouseout events update a selected fruit ID, re-rendering the visualization.

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