Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit-Hover to Select.js

✓ Published0🌍 Public
NNeepaB
Last edited Dec 21, 2020
Created on Dec 21, 2020

A dynamic bowl of fruit shows apples and lemons as colored circles that animate in size and position, with a black stroke highlighting the currently hovered fruit. The visualization uses D3 v5 and SVG, with `scaleOrdinal` mapping fruit types to colors and radii. Mouseover and mouseout events trigger a selection state, while transitions animate the circles' entry, exit, and updates as fruits are eaten or replaced over time.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit : Hover to select

Interactive fruit bowl shows a row of apples and lemons rendered as SVG circles, where hovering highlights a fruit with a black outline. The example uses D3 v5’s data join with `merge` and `exit` to animate size and position changes via `transition`. Color and radius are mapped by fruit type using `scaleOrdinal`, while mouseover and mouseout events update a selected fruit ID, re-rendering the visualization.

TTomisin Owolabi
95% 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 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
94% 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
94% match
Loading thumbnail…

Bowl of Fruit-Hover to Select

Five fruit circles show apples and a lemon in a bowl, with hover highlighting the selected fruit using a black stroke. The visualization uses a general update pattern with D3 v5’s data join, `transition()` for animated radius and position changes, and `scaleOrdinal` for color and size. As timeouts modify the fruit array, entering and exiting circles animate smoothly, demonstrating reusable update logic with SVG.

JJuyeonee
94% match
Loading thumbnail…

Bowl of Fruit-Hover to Select

A bowl of fruit made of SVG circles animates in and out, changing color and size. Hovering selects a fruit, outlining it in black. The example demonstrates DOM manipulation with D3.js v5, using `scaleOrdinal` for color and radius, `selection.selectAll`, and `.transition().duration()` for animated enter, update, and exit states. Fruits are generated from a range, removed, and mutated over time.

XX. N. Chu
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles animate into a bowl as apples and lemons, each encoded with distinct colors and radii. Hovering highlights a fruit with a black outline and updates the selected state, while non-selected fruits lose the stroke. The example uses D3 v5 with a data join, `scaleOrdinal` for color and size, and transitions to animate entering, updating, and exiting circles. A `setSelectedFruit` callback triggers re-rendering on mouseover and mouseout, demonstrating interactive selection with animated state changes.

AAmol Kulkarni
94% 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
94% match