Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
CChenluWang96
Last edited Mar 10, 2020
Created on Mar 10, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera
96% match
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

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 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 appear in a row on an SVG canvas, each rendered as a filled circle. Hovering over a fruit highlights it with a black stroke, and moving the mouse away removes the highlight. The example uses d3-selection’s data join and transitions to animate the circles’ entry, exit, and size changes as apples are eaten or replaced by a lemon. A color scale maps fruit types to red or yellow, while a radius scale distinguishes apple and lemon sizes.

Bbprokopowicz
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