Bowl of Fruit - Hover to select

100%

Bowl of Fruit - Hover to select

✓ Published0🌍 Public

Last edited Jun 5, 2020

Created on Jun 5, 2020

Forked from Bowl of Fruit - Click to select

Five apples sit in a bowl and react to a timed sequence: one is removed, another transforms into a lemon, and a third disappears. Hovering over any fruit highlights it with a black outline. Built with D3 v5, the example uses chained `transition()` methods to animate position, radius, and opacity, while `scaleOrdinal` maps fruit types to colors and sizes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a row, rendered as colored circles with D3's `scaleOrdinal` mapping types to fill and radius. Hovering a fruit selects it with a black stroke in an animated SVG scene, while the menu updates through `selection.on`. A background timer script mutates the data array over time, adding a lemon, removing fruit, and letting the `transition` API animate shape changes at one-second intervals.

JJonathan Phelps

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and one lemon sit in a row as SVG circles, colored by type and scaled by radius. Hovering any fruit highlights it with a black stroke and triggers a callback to update the selection state. Entering, updating, and exiting fruits are animated through `transition().duration(1000)` on radius and x-position. The example uses D3 v5 with `scaleOrdinal`, data joins, and ES6 modules, driven by timed state changes that eat and replace fruits.

CChenluWang96

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon appear as circles in a bowl, with an apple automatically removed after one second and a second apple removed later, while one apple transforms into a lemon. Hovering over any fruit highlights it with a black stroke, and the selection is cleared on mouseout. The example uses D3 v5’s selection and transition APIs with a custom `fruitBowl` component, ordinal color and radius scales, and a one-second animation duration for enter, update, and exit operations.

Iianleekq

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj

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 circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

YYF

95% match