Bowl of fruits - hover to select

100%

Bowl of fruits - hover to select

✓ Published1🌍 Public

Last edited Jul 20, 2019

Created on Jul 14, 2019

Forked from Bowl of fruits - click to select

Five pieces of fruit, represented as red apples and a yellow lemon, sit in a rounded bowl. Hovering over a fruit selects it, highlighting it with a blue stroke, and moving the mouse away deselects it. The fruit enter and exit with animated transitions using D3 v5’s `transition().duration()`, while `scaleOrdinal` maps fruit types to colors and radii. A `rect` forms the bowl, and `mouseover`/`mouseout` events trigger the selection, with fruits rendered in SVG.

AI-generated description

Click to Select

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

96% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit—apples and a lemon—appear in a row, and hovering over any fruit selects it with a dark blue outline while moving the mouse away deselects it. Using d3.v5, the fruitBowl function manages enter, update, and exit selections with circle elements, applying ordinal color and radius scales, and animating transitions via `.transition().duration(1000)`. The code includes a timed sequence that removes an apple, replaces one with a lemon, and filters out another, demonstrating dynamic data binding. SVG rendering and mouseover/mouseout event handlers drive the interaction.

RRubens

96% match

Loading thumbnail…

Bowl Fruit - Hover to select

Five pieces of fruit in a bowl animate between apples and lemons while responding to hover. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, and `selection.join` patterns with `transition` handle enter, update, and exit states. Circle elements grow from radius zero and shrink on removal, with an animated swap from apple to lemon. A black stroke highlights the selected fruit via mouseover events that update a `selectedFruit` variable, triggering a re-render. The example uses plain SVG circles and D3 transitions over one second.

JJefferson Abreu

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five pieces of fruit sit in a rendered bowl, and hovering over an apple or lemon highlights it with a black outline while clearing the selection on mouseout. The example uses D3 v5’s data join and scaleOrdinal for color and radius, with SVG circles and text. Animated updates over time remove and replace fruit, demonstrating enter, update, and exit transitions.

Ppkcesar

95% match

Loading thumbnail…

Bowl of Fruit - hover to select

Five pieces of fruit sit in a row, each drawn as an SVG circle; hovering over one selects it with a black outline. The bowl updates over time, as apples are removed and one apple changes into a lemon via d3 transitions. The code uses d3.scaleOrdinal for color and radius, data joins with enter/merge/exit, and mouseover/mouseout events to trigger selection.

Aaidanoconnor1

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 pieces of fruit sit in a row as circles colored by type, either red apples or yellow lemons. Hovering over a fruit outlines it in black while the mouse is over it. Using d3 transitions with `attr` tweening, fruits animate in and out by scaling their radius, while updates such as removal or type change occur on a timer. The code uses `d3.select`, `scaleOrdinal`, and data joins with `.enter()`, `.merge()`, and `.exit()`.

NNikki-gea

95% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five pieces of fruit sit in a row on a neutral background. Hovering over a fruit selects it with a black outline. A timed script removes fruit, converts an apple to a lemon, and filters the list, using D3’s selection API with merge, exit, and transition methods to animate the changes over one-second durations via `.attr('r', 0)` and `.attr('r', d => radiusScale(d.type))`. The fruit types are distinguished by ordinal color and radius scales.

JJoachim Klug

95% match