Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
YYifu Chen
Last edited Dec 28, 2019
Created on Dec 28, 2019

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.

AI-generated description

Yifu's practice on click to select with d3.js

Tutorial: https://www.youtube.com/watchv=_8V5o2UHG0E&t=1220s

Dec. 28, 2019

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

Bowl of Fruit - Hover to Select

Five apples hover to select, showing a black stroke on the chosen fruit. After one second, an apple is removed; at two seconds, the third apple turns into a lemon; and at three seconds, the second apple disappears. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and SVG transitions animate entering, updating, and exiting circles with a one-second duration.

JJordan Chiu
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples appear in a row on a neutral background. Hovering over a fruit highlights it with a black outline and turns it green, while moving the mouse away removes the selection. The visualization uses D3 v5 data joins and ordinal scales to map fruit types to radii and colors, and transitions animate the entry, exit, and attribute changes. Apples are removed, one is transformed into a lemon, and the selection state is managed by a callback that triggers re-renders.

MMichał Szumnarski
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five circles representing apples appear in a bowl-shaped row, with a lemon replacing one apple after two seconds. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The visualization uses d3.v7 with an SVG data join, `scaleOrdinal` for color and radius, and `transition().duration()` to animate fruit entry, exit, and type changes. The code also uses `selection.merge` and `selection.exit` for smooth updates.

Yyejichun@naver.com
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 appear in a row and animate inward from a zero radius, with hover highlighting the selected fruit with a black stroke. The code uses d3 v5 with SVG circles and ordinal scales for color and radius, while selection is managed through mouseover and mouseout events. Timed updates remove apples, replace one with a lemon, and filter another out, demonstrating enter, update, and exit transitions over one second durations.

LLongYuu
95% match