Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to select

✓ Published0🌍 Public
Ggregosaure
Last edited Aug 22, 2020
Created on Aug 22, 2020

A bowl of fruit grows from nothing as five apples animate into place, each with a colored fill and a black outline on hover. The SVG visualization uses d3.select, d3.range, and d3.scaleOrdinal for color and radius, with a transition of 1000 milliseconds to update positions, sizes, and removals. The selection state is managed via mouseover and mouseout events, triggering a re-render that modifies the data, such as removing an apple or replacing one with a lemon.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of five apples animates in from the center, expanding to their positions. Hovering over any fruit outlines it in black, with a mouseout clearing the selection. Over a few seconds, apples are removed and one is transformed into a lemon, with the scene re-rendering via a D3 `select` and custom `fruitBowl` function. The SVG circles use D3's `scaleOrdinal` for color and radius, `transition().duration(1000)` for smooth changes, and event handlers `on('mouseover')` and `on('mouseout')` to trigger selection state updates.

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

Bowl of fruit - hover to select

A bowl of fruit renders as five apples in SVG, with hover highlighting the selected fruit by adding a black stroke. The code uses d3.scaleOrdinal for color and radius mapping, and transitions animate fruit entry, exit, and replacement. Over time, apples are removed and one becomes a lemon, with d3 data joins handling updates via keyed selection and transition.attr for radius changes.

BbeauMarko
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples animate into a row on an SVG canvas, each scaling up to its assigned radius and color through D3 ordinal scales. Hovering highlights a fruit with a black stroke, updating a selected state via mouseover and mouseout events. D3's data join and transitions handle entering, updating, and exiting elements as the dataset changes over time.

NNitin Vadhiya
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of five apples is rendered as SVG circles, and hovering over a fruit highlights it with a black stroke while clearing the selection on mouseout. The visualization animates state changes over time as apples are removed or replaced with lemons, using smooth transitions to shrink exiting circles and resize new ones. Built with D3 v5, it employs `scaleOrdinal` for color and radius mapping, data joins with key functions, and transition methods to update circle positions and sizes across a 960 by 500 canvas.

HHelenaShu
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear as red circles that grow from zero radius on an SVG canvas. Hovering over a fruit turns its stroke blue, while clicking turns it black; these selections persist on a random ID. The visualization uses d3.v5's selection, transition, and merge methods to animate arrivals and removals with a one-second duration. A setTimeout sequence demonstrates the animation by removing one apple, changing another to a yellow lemon, and filtering out a third.

YYifu Chen
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
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch
95% match