Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
WWarren-Fitzhenry
Last edited Dec 31, 2019
Created on Dec 31, 2019

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.

AI-generated description

Using mouseover and mouseout for interaction

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit hover to select

Five fruit circles render in an SVG, with apples as large red circles and lemons as smaller yellow ones. Hovering over a fruit highlights it with a grey outline, and moving the mouse away removes the highlight. The example demonstrates data joins and transitions using d3-selection and `transition.attrTween`, with `scaleOrdinal` from d3-scale mapping fruit types to colors and radii. Timed updates add, remove, and change fruit types, animating circle radius and position changes over one second.

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

Bowl of Fruit - Hover to Select.js

Five fruit circles sit in a beige bowl, rendered as SVG rectangles and circles. Hovering over a fruit highlights it with a black stroke, and the selection updates state before smoothly transitioning the circles to new positions and radii. The example uses d3-selection, d3-scaleOrdinal, and d3-transition to animate fruit removal and type changes from apple to lemon, driven by timed mutations of the data array.

Dddperdue
96% match
Loading thumbnail…

Bowl of Fruit, Hover to Select

Five fruit circles sit in a row, transitioning between apples and lemons with hover selection. D3 v5’s data join and ordinal scales for color and radius drive the SVG circles, while `selection.on("mouseover")` and `selection.on("mouseout")` update a selected fruit’s stroke. Enter, merge, and exit transitions animate radii over one second, with fruits added, removed, or replaced via timed data mutations.

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

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

SSophia Murage
96% match