Bowl of Fruit - Hover to select

100%

Bowl of Fruit - Hover to select

✓ Published0🌍 Public

Last edited Aug 29, 2020

Created on Aug 26, 2020

Forked from Bowl of Fruit - Click 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()`.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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 circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

YYF

95% match

Loading thumbnail…

Bowl of Fruit - hover to select

Five fruit circles sit in a row and animate in with a smooth transition. Hovering over any fruit strokes it black, while removing the mouse clears the selection. The code uses D3 v5’s data join with a key function to update exiting circles, scaling radius and fill via ordinal scales per fruit type. Over time, a timer script removes and replaces apples with lemons, demonstrating animated enter, update, and exit transitions.

1123fischer

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

95% match

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

95% match