Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
MMichał Szumnarski
Last edited Aug 3, 2019
Created on Aug 3, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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 data-driven fruit bowl shows five apples as colored circles, which shrink and disappear when eaten, and one apple transforms into a lemon. Hovering over any fruit selects it, adding a black stroke, and moving the mouse away removes the selection. The visualization uses D3 v6’s data join with `selection.merge` and transitions to animate radius changes over one second, while a scaleOrdinal maps fruit types to colors and sizes.

HHe Jianfeng
96% match
Loading thumbnail…

Bowl of Fruits: Hover to Select

Five apples and a lemon sit in a brown bowl on a light background. Hovering over any fruit highlights it with a black outline. The fruit bowl uses D3 v5 data joins and ordinal scales for color and radius, with transitions animating the addition and removal of fruit over time.

Ppeterjchan
96% match
Loading thumbnail…

Bowl of Fruit - hover to select

Five apples hover in a row; mousing over one highlights it with a black outline, and clicking is disabled. The visualization demonstrates data joins and transitions using D3 v5, where apples shrink and disappear, and one apple morphs into a lemon over time. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates enter, update, and exit selections.

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

Bowl of Fruit - Hover to Select

Five apples sit in a bowl, rendered as red circles with labels; hovering over a fruit highlights it with a black stroke, and selecting triggers updates. Over three seconds, the data changes: an apple is eaten, one becomes a yellow lemon, and another is removed, showing animated transitions. Built with d3 v5, it uses selection joins, `scaleOrdinal` for color and radius, and SVG circles, rects, and text elements within a single `<g>` per fruit.

MMiish84
95% 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
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