Bowl of fruit - Hover to select

100%

Bowl of fruit - Hover to select

✓ Published0🌍 Public

Last edited Jan 4, 2020

Created on Jan 4, 2020

Forked from Bowl of fruit - Hover to select

Five circles enter as apples with a zero radius and grow to their full size. Hovering over a fruit selects it with a black outline. The example uses d3's selection, merge, and transition APIs to animate entering, exiting, and updating circles based on a changing fruit array, with color and radius scaled by fruit type.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

IIsmaelHernandezL

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

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit—initially apples, with one turning into a lemon—are drawn as circles that grow and shrink in size upon entering or exiting the SVG canvas. Hovering over a circle highlights it with a black stroke, and the selection state drives the rendering. The example uses D3 v5’s selection merging and transition API to animate radius and position, with a scaleOrdinal mapping fruit type to color and radius.

BbeauMarko

94% match

Loading thumbnail…

Bowl of Fruit -Hover to Select

Five fruit circles enter the bowl and animate to full size using D3 transitions. Hovering strokes a selected fruit black, while the selection state updates through a callback. The example demonstrates data joins and enter/update/exit patterns with `d3.scaleOrdinal` for color and radius, and `transition.attr` for animations. Fruits are removed or mutated over time.

MMunTatt Yap

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing fruit sit in a row, transitioning between apple and lemon types over time. Hovering over a fruit selects it, drawing a black stroke around that circle. The code uses d3.js with the fruitBowl module, handling data joins and transitions. SVG circles animate their radius and position using d3 transitions, while a scaleOrdinal maps fruit types to colors and sizes.

CCurran Kelleher

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles appear in a row, transitioning smoothly from zero radius to their full sizes. The circles are apples and a lemon, each colored by a D3 ordinal scale. Hovering over a circle selects it, shown by a black stroke, and un-hovers deselect it. The scene uses D3 v5’s selection and transition APIs to animate its entering, exiting, and state changes.

GGino Dzin

94% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles move into place as a bowl of fruit, alternating red apples and a yellow lemon, while hovering over any circle selects it with a black outline and animates its position and size. The example uses d3.v5’s scaleOrdinal for color and radius mappings, with circle transitions driven by the merge and transition API, and data updates via setTimeout that remove and replace elements, triggering enter, update, and exit animations.

PPabloReyesBetanzo

94% match