Bowl of Fruit - Hover to Select

100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Oct 2, 2020

Created on Oct 2, 2020

Forked from Bowl of Fruit - Click to Select

A bowl of fruit rendered as SVG circles animates through a sequence of apples being eaten and one apple morphing into a lemon. Hovering over any fruit highlights it with a black stroke, using the `setSelectedFruit` callback to update the selected state. The visualization leverages D3 v5's data joins and `transition().duration(1000)` to smoothly animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes. The React-based code imports specific D3 functions like `select`, `range`, and `scaleOrdinal` to drive the interactive SVG rendering.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of fruit hover to select

A bowl of fruit rendered as circles in an SVG responds to mouse hover, with a black stroke marking the selected fruit. The visualization demonstrates data joins with entering, updating, and exiting elements, animated via `transition()` over one second. Apples and lemons differ in color and radius using `scaleOrdinal`, while d3’s `selectAll` and `data` manage dynamic changes as fruits are removed or transformed. The React framework calls the `fruitBowl` function on each state update, passing the selected fruit ID to control the stroke styling.

KKurt J Nilsen

96% match

Loading thumbnail…

Bowl of fruits - hover to select

A bowl of fruits shows five apples rendered as SVG circles, with hovering over a fruit highlighting it with a black stroke. The visualization uses d3.scaleOrdinal to map fruit types to colors and radii, and transitioned circle radii to animate fruits entering and exiting. Data updates remove an apple, replace one with a lemon, and filter out another, all driven by React state through setSelectedFruit. The code leverages d3-selection, d3-transition, and d3-scale within a React framework.

SSchmittYannic

96% match

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles are rendered in an SVG, initially all apples, with a black stroke appearing on whichever fruit the mouse hovers over. The code uses a React-style render function with d3 selections and the `scaleOrdinal` color and radius scales to map fruit types to visuals. Updates occur via timed transitions: an apple is removed, a lemon replaces one apple, and another apple is filtered out. The `fruitBowl` function handles enter, update, and exit selections with `.transition().duration(1000)` for animated changes, while mouseover triggers `setSelected` to update the selection state.

BB Sundaresan

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

96% match

Loading thumbnail…

Bowl of Fruit Hover to Select

Five circles representing apples and lemons are rendered in an SVG bowl. Hovering over a fruit highlights it with a black stroke and logs its selection. The visualization uses React and D3 v5 to animate circle positions, radii, and colors via `transition().duration(1000)`, with data mutations (apple removal, lemon replacement) triggered by timeouts, demonstrating enter, update, and exit transitions.

Ddacoylo

96% match

Loading thumbnail…

Bowl of Fruit - Hover to select

A bowl of fruit rendered as circles animates through a sequence of changes: fruits disappear, and one apple transitions into a lemon. Hovering over any fruit selects it, displaying a black outline until the mouse moves away. The example uses d3-selection with data joins and transitions to animate circle radii and positions, while d3-scaleOrdinal maps fruit types to colors and sizes. The application state manages a selected fruit ID and triggers re-renders through a custom `fruitBowl` function.

CChinzorigt Ganbat

95% match

Loading thumbnail…

Bowl of Fruit -Hover to Select

This interactive SVG example uses React and D3 v5 to display a bowl of fruit as circles, with apples and lemons represented by red and yellow circles of different sizes. Hovering over any fruit highlights it with a black stroke, and selecting a fruit updates the visualization. The code uses D3's `scaleOrdinal` for color and radius scales, and animates circle radii with `transition().duration()` when fruits are added, removed, or change type. The data is a static array of fruit objects, with timed events removing or modifying fruits.

SScott Rapponotti

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera

95% match