Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
Ggharakhani1986
Last edited Jul 18, 2022
Created on Jul 18, 2022

Using D3 v5, this visualization displays a row of five apples as colored circles that animate in size and position. Hovering over any fruit highlights it with a black stroke and clears the selection on mouseout. The code uses `scaleOrdinal` for color and radius, `transition().duration()`, and a data join with `enter`, `merge`, and `exit`. Over time, `setTimeout` calls remove apples or change one to a lemon, demonstrating animated updates to the SVG scene.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

AAnthony Zornig
94% match
Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - Hovering to Select D3.js!

Five fruit circles, apples and lemons, render in an SVG bowl using D3 v5’s data join pattern. Hovering over a circle selects it, applying a black stroke via the `mouseover` and `mouseout` handlers. The `scaleOrdinal` color and radius scales map fruit types, while entering and exiting circles animate radius changes with `transition().duration(1000)`. A `setSelectedFruit` callback triggers re-renders, demonstrating animated updates as fruits are removed or replaced over time.

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

Fork of Bowl of Fruit - Hover to Select

A row of apples animates in using d3 transitions, with hover toggling a black stroke around the selected fruit. The code uses an ordinal color scale and radius scale, with d3 data joins handling enter, update, and exit. D3’s `transition().duration(1000)` animates circle radii and positions, while mouseover and mouseout events call a `setSelectedFruit` callback to update selection state.

Ssheafallick
93% match
Loading thumbnail…

Fork of Bowl of fruits - Hover

A fork of the "Bowl of Fruits" example demonstrates hover interactions with D3.js. Five apples animate into a row, then undergo changes over time: an apple is eaten, one transforms into a lemon, another is removed, and a third becomes rotten. Hovering over any fruit highlights it with a black outline. The visualization uses D3’s `select`, `scaleOrdinal`, and `transition` APIs for smooth radius and position animations.

Nnikeshkv
93% match
Loading thumbnail…

Fork of Bowl of fruit - Hover to select

This example shows a bowl of five fruit represented as animated SVG circles. Each circle is colored and sized by its type—apples are red and large, lemons are yellow and small—using `d3.scaleOrdinal` for both color and radius. The visualization responds to user clicks: clicking a fruit highlights it with a black outline, and the fruit bowl changes over time as fruits are removed or replaced. The animation uses D3 v6 transitions to shrink exiting fruits and grow entering ones.

MMajaha21
93% match