Bowl of fruit hover to select

100%

Bowl of fruit hover to select

✓ Published2🌍 Public

Last edited Nov 10, 2020

Created on Nov 10, 2020

Forked from Bowl of fruit click to select

Five fruit shapes sit in a bowl and change as data updates over time, with hovering highlighting a fruit in black. The visualization uses D3 v5 selections and data joins to bind fruit objects to SVG groups and circles, with `scaleOrdinal` for color and radius. Transitions animate position, fill, and size changes as fruits are removed or change type.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit shapes appear in a row, rendered as SVG circles with a bowl drawn beneath them. Hovering over a fruit highlights it with a black stroke and triggers a selection state. The visualization uses D3 version 5 with a React framework, employing ordinal scales for color and radius, and transitions for smooth updates. Over time, the dataset changes through timed removals, type changes, and additions, demonstrating data joins.

AAnShed

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

95% match

Loading thumbnail…

Bowl of fruits, hover to select

Five fruit circles appear in a row, with apples rendered larger and red, lemons smaller and yellow. Hovering over a fruit selects it, adding a thick black stroke, and hovering away removes the selection. The visualization uses D3 v5 with an SVG rendering and animated transitions, updating the data-bound circles through a custom `fruitBowl` module that leverages `scaleOrdinal` for color and radius scales.

YYedrup

94% match

Loading thumbnail…

Bowl of Fruit-Hover to Select

Five fruit shapes sit in a bowl, with text labels beneath each. Hovering over a fruit outlines it in black and logs the selection to the console. The fruit bowl is built with D3 version 5's selection API, using `scaleOrdinal` for color and radius, and transitions animate the circles' radius over one second. Animated by timed data mutations, the example removes and replaces apples with lemons.

Mmeihaoming

94% match

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

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

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

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