Bowl of Fruit - Hover to Select

100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Jun 25, 2020

Created on Jun 25, 2020

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

AI-generated description

A bare minimum HTML page.

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

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

96% match

Loading thumbnail…

Bowl of fruit Hover to Select

Five fruit circles render in an SVG as apples and lemons; hovering one highlights it with a black stroke while the previous selection clears. The React and D3 v5 code uses a `scaleOrdinal` for color and radius, and enters, updates, and exits circles with a 1000-millisecond `transition`. The example demonstrates data joins by removing, changing, and filtering fruit items while animating circle size and position.

Jjeelong

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

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

95% match

Loading thumbnail…

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

NNkwachi Abel

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example shows a bowl of five apples, where hovering over a fruit selects it by giving it a black outline, while other fruits remain unstyled. The visualization animates changes over time—an apple is removed, an apple becomes a lemon, and another apple is deleted. The code uses the D3 v5 library, specifically importing `scaleOrdinal` and `select`, and renders SVG circles with `.transition().duration(1000)` for animated updates, while the dataset is a random array of fruit objects stored in memory.

Ffernandotsurukawa

95% match