Bowl of fruit - Hover to select

100%

Bowl of fruit - Hover to select

✓ Published0🌍 Public

Last edited May 29, 2022

Created on May 29, 2022

Forked from Bowl of fruit - Click to select

This visualization shows a dynamic fruit bowl that updates through a timed sequence: apples disappear, one apple transforms into a lemon, and another apple is removed. Hovering over any fruit circle selects it, highlighting the chosen item with a black stroke. Built with React and D3 v5, the `fruitbowl.js` component uses `scaleOrdinal` for color and radius mapping, while the selection logic relies on `mouseover` and `mouseout` events. Animated transitions via `transition().duration(1000)` smoothly resize circles, and the underlying data is a simple array of fruit objects with random IDs, rendered as SVG circles.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Bowl of Fruit Hover to Select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are represented as circles, and hovering over a fruit highlights it with a black stroke. The animation shows fruits being eaten, transformed from apple to lemon, and removed from the bowl over time. Using React and D3 v5, the `fruitBowl` function leverages `scaleOrdinal` for color and radius mapping, along with D3's selection and transition APIs to smoothly animate entering, updating, and exiting circle elements with a one-second duration.

JJake

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

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.

BbeauMarko

95% match

Loading thumbnail…

Bowl of fruit click to select

This example shows a bowl of fruit that changes over time, with circles representing apples and lemons that users can click to select, highlighting the chosen fruit with a black outline. The visualization demonstrates animated transitions as fruits are removed, transformed, and repositioned using d3 transitions over one second. Built with React and d3.v5, the code uses `scaleOrdinal` for color and radius mapping, while selection and data binding manage the dynamic updates. The SVG rendering includes click handlers that trigger re-renders, and the fruit bowl shrinks and morphs as fruits disappear from the array.

KKurt J Nilsen

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj

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

95% match

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

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit hovers a row of apples and lemons in an SVG canvas; moving the cursor over a fruit selects it, highlighting it with a black outline and triggering an animated resize of the circles. Data is generated procedurally with random IDs, while the visualization uses D3 v5's `select`, `scaleOrdinal`, and `.merge()` API to handle enter, update, and exit transitions over a one-second duration. The fruit bowl remakes itself as apples are eaten or replaced.

Ssakhabutdinov

95% match