Ball of Fruits- Hover interaction

100%

Ball of Fruits- Hover interaction

✓ Published0🌍 Public

Last edited Feb 8, 2020

Created on Feb 8, 2020

Five circles render as apples that morph and reorder into a static row until one fruit shrinks and a later fruit turns into a lemon. Hovering a fruit highlights its stroke in purple via a mouseover handler that updates a selectedFruit state. The visualization uses d3’s scaleOrdinal for color and radius, transition().duration() for 1000ms position and size animations, and SVG circle/text elements. Data is generated in JavaScript with range() and Math.random().

AI-generated description

Ball of Fruits- Interaction

MIT Licensed

Similar vizzes

Loading thumbnail…

Ball of Fruit

Animated SVG circles represent apples and lemons in a fruit bowl, with hover events selecting a fruit and triggering a black outline. The visualization uses d3’s `scaleOrdinal` for color and radius mapping, and `transition` for smooth resizing and repositioning. Written in React with D3 v5, the data is a JavaScript array whose length and fruit types change over time, demonstrating enter, update, and exit transitions as fruits are added, removed, or substituted.

DDanzeOnn

91% match

Loading thumbnail…

Ball of Fruits- Interaction

A set of colored circles represents fruits in a bowl, with apples shown in red and lemons in yellow. Users click a fruit to highlight it with a purple outline, while the entire group smoothly rearranges its positions over time. The visualization uses D3's selection and transition APIs, including `selection.transition().duration()` and `.merge()` to animate enter, update, and exit states. The code relies on `d3.select`, `d3.range`, and `d3.scaleOrdinal` for data generation and color/radius mapping, with data defined as an array of fruit objects that are modified asynchronously.

FFoysal Ahmed Emon

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

90% match

Loading thumbnail…

Bowl of Fruit - hover to select

Five SVG circles enter the scene as red apples, then sequence through timed updates: an apple disappears, another turns into a yellow lemon, and a third is removed. Hovering over any fruit selects it with a black outline, using mouseover and mouseout events to toggle the selection state. Fruit positions and radii come from ordinal scales mapping fruit type to color and size, while entering and exiting circles animate through chained transitions that adjust radius over one second. The visualization uses D3 v5 with data joins keyed by unique id.

DDi Zhen

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

90% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Ccodexmon

89% match

Loading thumbnail…

bowl of fruit-hover to select

Five circles initially render as apples in a red-to-yellow color scale, with hover events highlighting the selected fruit via a black stroke. Using d3.v5 data joins and transitions, the example animates circle radius and position changes while updating the selection state through callbacks. Over sequential timeouts, the visualization removes fruits and mutates an apple into a lemon, demonstrating enter, update, and exit selections with d3.scaleOrdinal for color and radius values.

Ssingularity6033

89% match

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

89% match