Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
Iianleekq
Last edited Feb 20, 2019
Created on Feb 20, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Yyejichun@naver.com
96% 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
96% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and one lemon sit in a row, animated with a one-second transition as fruit is eaten or replaced. Hovering any piece outlines it in black, with a click-free selection handled through `mouseover` and `mouseout` events. The D3 v5 code uses `select`, `range`, `scaleOrdinal`, and `transition` to manage enter, update, and exit selections on SVG circles, with color and radius scales mapping fruit type to visual properties.

YYifei Liu
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit—apples and a lemon—appear in a row, and hovering over any fruit selects it with a dark blue outline while moving the mouse away deselects it. Using d3.v5, the fruitBowl function manages enter, update, and exit selections with circle elements, applying ordinal color and radius scales, and animating transitions via `.transition().duration(1000)`. The code includes a timed sequence that removes an apple, replaces one with a lemon, and filters out another, demonstrating dynamic data binding. SVG rendering and mouseover/mouseout event handlers drive the interaction.

RRubens
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples hover to select, showing a black stroke on the chosen fruit. After one second, an apple is removed; at two seconds, the third apple turns into a lemon; and at three seconds, the second apple disappears. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and SVG transitions animate entering, updating, and exiting circles with a one-second duration.

JJordan Chiu
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear in a row and animate inward from a zero radius, with hover highlighting the selected fruit with a black stroke. The code uses d3 v5 with SVG circles and ordinal scales for color and radius, while selection is managed through mouseover and mouseout events. Timed updates remove apples, replace one with a lemon, and filter another out, demonstrating enter, update, and exit transitions over one second durations.

LLongYuu
96% match
Loading thumbnail…

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

HHasideluxe
96% match