Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Hover to select

✓ Published0🌍 Public
Jjlongwellchc
Last edited Sep 17, 2019
Created on Sep 17, 2019

A bowl of fruit holds a dynamic collection of apples and lemons. Hovering over a piece of fruit selects it, highlighting its outline in black. The visualization uses D3 v5's `scaleOrdinal` for color and radius mapping, and animated transitions over one second to grow or shrink fruit as they enter or exit. Data is manipulated via timeouts that eat and replace fruit, demonstrating the reactive updates driven by the `fruitBowl` function.

AI-generated description
MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Bowl of Fruit - Hover to select

A fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

SShuyu Zheng
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A data-driven fruit bowl shows five apples as colored circles, which shrink and disappear when eaten, and one apple transforms into a lemon. Hovering over any fruit selects it, adding a black stroke, and moving the mouse away removes the selection. The visualization uses D3 v6’s data join with `selection.merge` and transitions to animate radius changes over one second, while a scaleOrdinal maps fruit types to colors and sizes.

HHe Jianfeng
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 pieces of fruit sit in a row, rendered as circles that scale to their type: apples are large and red, lemons are small and yellow. Hovering over a circle highlights it with a black outline, and a click-free selection updates a variable that triggers an animated re-render via the custom `fruitBowl` module. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition().duration(1000)` methods to animate entering, exiting, and updating circles. An external script drives the scene by removing fruits and mutating an apple into a lemon after timed delays.

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