Fork of Bowl of Fruit (Hover to Select)

100%

Fork of Bowl of Fruit (Hover to Select)

✓ Published0🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

Forked from Bowl of Fruit (Click to Select)

This example demonstrates a dynamic fruit bowl visualization where apples and lemons appear, transform, and disappear over time. A black stroke highlights the currently hovered fruit, with the selection state cleared on mouseout. The code uses d3 v6 APIs including `scaleOrdinal` for color and radius mapping, `selection.enter`/`exit` with `transition.attr` for smooth size changes, and `selection.on` for mouse events. The SVG circles are bound to data objects with unique IDs via `data(fruits, d => d.id)`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

This example demonstrates an interactive fruit bowl visualization where users hover over apples and lemons to select them, highlighting the chosen fruit with a thicker stroke. The fruit transitions in and out of the bowl with animated scaling. Built with React and D3 v6, it uses `scaleOrdinal` for color and radius mapping, and SVG `transition().duration()` for smooth updates. The code manages dynamic data changes—removing fruits and swapping types—via D3’s data join pattern.

MMatthew Rubino

94% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu

94% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example demonstrates an interactive data join with D3 v7. The visualization renders apples and lemons as SVG circles, which animate their radius and x-position using `transition().duration(1000)` as fruits are added, removed, or replaced. Hovering over a circle triggers a `mouseover` event, invoking `setSelectedFruit` to highlight it with a black stroke; moving the mouse away clears the selection. The code uses D3’s `scaleOrdinal` for color and radius mappings, with a keyed `data` join on fruit IDs to track elements across updates.

TToooooooT

94% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A bowl of fruit rendered as five red apples animates as they are eaten and replaced by a lemon, while hovering over any fruit highlights it with a black outline. The example uses d3-selection’s data join and transitions to smoothly shrink and remove exiting circles, update fruit types, and re-render on mouseover and mouseout events. The fruit bowl is built with SVG circles, with colors and radii assigned via d3.scaleOrdinal, and state management handled through a custom render function in plain JavaScript.

Jjlspangl

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

93% match

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - with hover selection

A bowl of fruit shows apples and lemons as scaled circles that animate in and out as items are added or removed. Hovering over a fruit selects it, highlighting it with a black stroke. The example demonstrates data joins and transitions using d3.selectAll, selection.merge, and selection.exit, with d3.scaleOrdinal for color and radius mapping. Animated updates occur via transition.attr over one second, triggered by setTimeout calls that pop, replace, or filter the fruit array.

Cceresfin

93% match

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example shows a row of five apples rendered as SVG circles that transition between states over time. Clicking a fruit selects it with a black stroke, while the dataset changes through timed updates: fruits disappear, a lemon replaces an apple, and positions shift. The visualization uses D3 v5 with `scaleOrdinal` for color and radius, plus `transition().duration()` to animate entering, updating, and exiting circles.

Cchristina030

93% match

Loading thumbnail…

Fork of Bowl of fruit - hover to select

A bowl of five apples rendered as SVG circles animates through data updates, with hover interactions selecting a fruit by adding a black stroke. The visualization demonstrates D3 v5’s join pattern using `selection.data`, `enter`, `merge`, and `exit` transitions, with `scaleOrdinal` mapping fruit types to colors and radii. Hovering triggers a callback to update the selected fruit, while timed actions sequentially remove fruits and replace one apple with a lemon, causing smooth radius and position transitions over one-second durations.

TTimothy sit

93% match