100%

Bowl of Fruit, Highlight on Hover

✓ Published0🌍 Public

Last edited Dec 2, 2018

Created on Dec 2, 2018

Forked from Bowl of Fruit, Interaction click

Five pieces of fruit sit in a row, rendered as scaled SVG circles. Hovering over an apple or lemon highlights it with a black outline, while a click sets a selection that persists. The bowl updates dynamically: apples are removed, and one apple’s type changes to a lemon, with a 1000-millisecond transition animating the radius change. Built with d3 v5’s `select`, `scaleOrdinal`, and `transition`, it uses `mouseover` and `mouseout` events to trigger a state change and re-render.

AI-generated description

General Update Pattern

MIT Licensed

Similar vizzes

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

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

94% match

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

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit sit in a row, rendered as circles that scale to their type: apples are large and red, lemons are small and yellow. Hovering over a circle highlights it with a black outline, and a click-free selection updates a variable that triggers an animated re-render via the custom `fruitBowl` module. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition().duration(1000)` methods to animate entering, exiting, and updating circles. An external script drives the scene by removing fruits and mutating an apple into a lemon after timed delays.

Ggabcoderboi

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

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

94% match

Loading thumbnail…

Bowl of Fruit - hover select

Five apples animate into a row; hovering highlights a fruit with a black outline, and clicking away removes the selection. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and `transition` for entering, updating, and exiting circles. Apples and lemons are represented as SVG circles, with mouseover and mouseout events triggering a selection state that re-renders the bowl.

AAndrew Fletcher

94% match