Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
Yyejichun@naver.com
Last edited Jul 28, 2021
Created on Jul 28, 2021

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.

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

Bowl of Fruit - Hover to select

Five circles representing fruit transition and scale into place in a bowl, with apples and lemons distinguished by color and radius. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouse-out. The visualization uses D3 v5’s selection merge, transition, and scaleOrdinal APIs to animate enter, update, and exit states as fruits are removed or replaced.

Hhugomell
97% 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
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 represent apples and a lemon in a bowl, with hovering over any fruit highlighting it with a black stroke. The code uses D3 v5 with an ordinal color scale and radius scale, binding data to SVG circles. Enter, update, and exit selections are animated via transitions over one second, while mouseover and mouseout events trigger a selection callback that re-renders the visualization.

NNita
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 fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

SShuyu Zheng
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles sit in a row, animating in and out as apples are removed, replaced by a lemon, and filtered from the bowl. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses D3 v5’s data join, `transition().duration(1000)` for smooth radius and position changes, `scaleOrdinal` for color and size, and SVG circles with mouseover/mouseout event handlers.

ZZ-Richard
96% match