Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
LLongYuu
Last edited Nov 25, 2020
Created on Nov 25, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - hover select

Five apples animate into a row; hovering highlights a fruit with a black outline, and clicking away removes the selection. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and `transition` for entering, updating, and exiting circles. Apples and lemons are represented as SVG circles, with mouseover and mouseout events triggering a selection state that re-renders the bowl.

AAndrew Fletcher
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

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

Five fruit circles sit in a row and animate in with a smooth transition. Hovering over any fruit strokes it black, while removing the mouse clears the selection. The code uses D3 v5’s data join with a key function to update exiting circles, scaling radius and fill via ordinal scales per fruit type. Over time, a timer script removes and replaces apples with lemons, demonstrating animated enter, update, and exit transitions.

1123fischer
95% match