Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
Ffbudwill
Last edited May 4, 2020
Created on May 4, 2020

Five fruit circles, colored red for apples and yellow for lemons, sit in a row across an SVG canvas. Hovering over a circle selects it, drawing a black outline via mouseover and mouseout events that call the `setSelectedFruit` callback. The example demonstrates data joins with `selection.data`, `enter`, and `exit`, animating radius changes through `transition().duration(1000)`. Timed updates remove and replace fruits, changing their type and scale using `scaleOrdinal` for both color and radius.

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

Bowl of fruit - Hover to select

Five fruit circles sit in a row, styled as apples and lemons with red and yellow fills via `d3.scaleOrdinal`. Hovering highlights a fruit with a black stroke, calling `setSelectedFruit` on `mouseover` and clearing it on `mouseout`. Removal, replacement, and type changes are animated with `transition().duration(1000)` on `r` and `cx`, using data joins in `d3.selection`. The SVG is rendered with D3 v5, with fruit size determined by a second ordinal scale.

PPedro Ernesto Tramontina
95% 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
95% match
Loading thumbnail…

Bowl of Fruit - Hover

A bowl of fruit displays five circles that animate into apples and lemons as they enter, resize, and exit the SVG. Hovering over a circle highlights it with a black outline, and the selection state updates the stroke accordingly. The code uses a data join with `selection.data`, `enter`, `merge`, and `exit` transitions, leveraging `transition.attr` for smooth radius and position changes. D3’s `scaleOrdinal` maps fruit types to colors and radii, while mouseover and mouseout events trigger the `setSelectedFruit` state handler.

Nnkohdatavis
95% 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
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five rounds of fruit appear as circles on a canvas, with apples in red and lemons in yellow, sized differently via d3.scaleOrdinal. Hovering over a circle selects it, adding a black stroke, and moving the mouse away deselects it. The D3 data join manages enter, update, and exit selections, animating circle positions and radii over one-second transitions as fruits are removed or change type. The example uses d3.select, selection.data, selection.enter, merge, and transition methods in SVG.

LLucas Meirelles
94% match