Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
JJordan Chiu
Last edited Jan 27, 2020
Created on Jan 27, 2020

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.

AI-generated description

Tutorial!

MIT Licensed

Similar vizzes

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

Bowl of Fruit — Hover to Select

Five apples and one lemon appear as circles in a bowl, with a dark outline highlighting whichever fruit is hovered. The visualization uses D3 v5’s data joins and ordinal scales to map fruit type to color and radius, while transitions animate shapes smoothly over one second. Repeated renders via `setTimeout` remove fruits and change an apple to a lemon, demonstrating enter, update, and exit selections in SVG.

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

Bowl of Fruit - Hover to Select

Five apples appear as red circles that grow from zero radius on an SVG canvas. Hovering over a fruit turns its stroke blue, while clicking turns it black; these selections persist on a random ID. The visualization uses d3.v5's selection, transition, and merge methods to animate arrivals and removals with a one-second duration. A setTimeout sequence demonstrates the animation by removing one apple, changing another to a yellow lemon, and filtering out a third.

YYifu Chen
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A data-driven fruit bowl shows five apples as colored circles, which shrink and disappear when eaten, and one apple transforms into a lemon. Hovering over any fruit selects it, adding a black stroke, and moving the mouse away removes the selection. The visualization uses D3 v6’s data join with `selection.merge` and transitions to animate radius changes over one second, while a scaleOrdinal maps fruit types to colors and sizes.

HHe Jianfeng
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear in a row on a neutral background. Hovering over a fruit highlights it with a black outline and turns it green, while moving the mouse away removes the selection. The visualization uses D3 v5 data joins and ordinal scales to map fruit types to radii and colors, and transitions animate the entry, exit, and attribute changes. Apples are removed, one is transformed into a lemon, and the selection state is managed by a callback that triggers re-renders.

MMichał Szumnarski
95% match