Bowl of Fruit - Hover to Select

100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Oct 30, 2021

Created on Oct 30, 2021

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit: Hover to Select

Five apples appear in a row on an SVG canvas, each rendered as a filled circle. Hovering over a fruit highlights it with a black stroke, and moving the mouse away removes the highlight. The example uses d3-selection’s data join and transitions to animate the circles’ entry, exit, and size changes as apples are eaten or replaced by a lemon. A color scale maps fruit types to red or yellow, while a radius scale distinguishes apple and lemon sizes.

Bbprokopowicz

95% match

Loading thumbnail…

Bowl of Fruit - Hover to select

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.

Ggregosaure

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples sit in a row, rendered as colored circles with D3's `scaleOrdinal` mapping types to fill and radius. Hovering a fruit selects it with a black stroke in an animated SVG scene, while the menu updates through `selection.on`. A background timer script mutates the data array over time, adding a lemon, removing fruit, and letting the `transition` API animate shape changes at one-second intervals.

JJonathan Phelps

95% 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 and one lemon sit in a row as SVG circles, colored by type and scaled by radius. Hovering any fruit highlights it with a black stroke and triggers a callback to update the selection state. Entering, updating, and exiting fruits are animated through `transition().duration(1000)` on radius and x-position. The example uses D3 v5 with `scaleOrdinal`, data joins, and ES6 modules, driven by timed state changes that eat and replace fruits.

CChenluWang96

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 appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

IIsmaelHernandezL

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