Bowl of Fruit - Hover to Select

100%

Bowl of Fruit - Hover to Select

✓ Published1🌍 Public

Last edited Jun 26, 2020

Created on Jun 26, 2020

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

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of fruit hover 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.

MMatan

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

A bowl of fruit renders as a row of colored circles, each sized by fruit type, with hover highlighting the selected fruit via a black stroke. The example demonstrates data joins and transitions, using D3 v5 scales (scaleOrdinal) and selection methods (enter, merge, exit). Circles animate radius and position over one-second transitions as fruits are added, removed, or changed programmatically, with React-like state management via a setSelectedFruit callback. SVG serves as the rendering target.

PPeter S

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit are rendered as color-coded circles in an SVG, with apples in red and lemons in yellow. Hovering over a circle highlights it with a black outline, and moving the mouse away removes the highlight. The visualization uses D3 v5's data join with key functions to smoothly transition circles entering, exiting, and updating, animating radius and position over one second. State changes, such as eating or replacing fruit, are triggered by timed events, with selection managed through React state and callbacks.

BbeauMarko

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example presents a bowl of fruit as five circles, initially all apples, arranged in a row. Hovering over a fruit selects it, highlighted with a grey outline. The visualization uses D3 v5 with a data join to animate changes: fruits are removed after one and three seconds, and one apple transforms into a lemon after two seconds. The code leverages D3's `scaleOrdinal` for color and radius, React-like props for state, and SVG transitions for smooth animations.

Vvic126

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

95% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

IIsmaelHernandezL

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