Bowl of Fruit - Hover To Select

100%

Bowl of Fruit - Hover To Select

✓ Published0🌍 Public

Last edited Sep 17, 2018

Created on Sep 17, 2018

Forked from Bowl of Fruit - Click To Select

Five circles represent apples and a lemon in a bowl, with hovering over any fruit highlighting it with a black stroke. The code uses D3 v5 with an ordinal color scale and radius scale, binding data to SVG circles. Enter, update, and exit selections are animated via transitions over one second, while mouseover and mouseout events trigger a selection callback that re-renders the visualization.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to select

Five fruit circles, initially apples, animate into a bowl formation. Hovering over a circle selects it, drawing a black outline, while the selection state and data updates are logged. The visualization uses d3.js v5 with ordinal scales for color and radius, and employs transition-based enter, update, and exit animations for data changes. It demonstrates dynamic data manipulation by removing fruits and changing an apple to a lemon.

EEdoardoRegini

96% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Yyejichun@naver.com

96% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles represent fruit in a bowl, with apples and lemons colored by a d3.scaleOrdinal. Hovering over a circle selects it with a black stroke, and the selection is managed through a state variable. The fruitBowl function uses data joins and transitions to animate the addition, removal, and type changes of fruit over time. The code employs d3-selection, d3-transition, and d3-scaleOrdinal with SVG rendering.

OOleg

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 - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles initially render as apples via an ordinal color scale and size scale, then update through d3 transitions when the data changes—removing a fruit, converting one to a lemon, and filtering another. Hovering a circle triggers `mouseover` and `mouseout` events that call `setSelectedFruit`, toggling a black stroke on the selected fruit. The visualization uses D3 v5's data joins, `selection.enter`, `merge`, `exit`, and `transition` APIs to animate the SVG elements.

DDaniel García

96% match

Loading thumbnail…

Bowl of Fruit -Hover to select

Five fruit circles represent apples and lemons in a simple SVG bowl. Hovering over a circle selects it with a black outline. The visualization uses D3’s ordinal color and radius scales to map fruit type to red or yellow fill and size. The `fruitBowl` function animates circle enter, update, and exit transitions over 1000 milliseconds. A script demonstrates dynamic updates by removing apples, replacing one with a lemon, and filtering data.

Pprincit

96% match

Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles representing fruit transition and scale into place in a bowl, with apples and lemons distinguished by color and radius. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouse-out. The visualization uses D3 v5’s selection merge, transition, and scaleOrdinal APIs to animate enter, update, and exit states as fruits are removed or replaced.

Hhugomell

96% match