bowl of fruit-hover to select

100%

bowl of fruit-hover to select

✓ Published0🌍 Public

Last edited Jan 30, 2020

Created on Jan 30, 2020

Forked from bowl of fruit-click to select

Five circles initially render as apples in a red-to-yellow color scale, with hover events highlighting the selected fruit via a black stroke. Using d3.v5 data joins and transitions, the example animates circle radius and position changes while updating the selection state through callbacks. Over sequential timeouts, the visualization removes fruits and mutates an apple into a lemon, demonstrating enter, update, and exit selections with d3.scaleOrdinal for color and radius values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover 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.

NNita

95% match

Loading thumbnail…

Bowl of Fruit — Hover to Select

Five apples and one lemon appear as circles in a bowl, with a dark outline highlighting whichever fruit is hovered. The visualization uses D3 v5’s data joins and ordinal scales to map fruit type to color and radius, while transitions animate shapes smoothly over one second. Repeated renders via `setTimeout` remove fruits and change an apple to a lemon, demonstrating enter, update, and exit selections in SVG.

MMuhammad Jarir Kanji

95% match

Loading thumbnail…

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033

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

94% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon

94% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Hhugomell

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

94% match