Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit-Hover to Select

✓ Published0🌍 Public
Ssgzzhinde
Last edited Jan 4, 2021
Created on Jan 4, 2021

D3 v5 renders five apples as SVG circles that smoothly grow into place, then shrink and vanish when items are removed. Hovering highlights a fruit with a black stroke while updating the `selectedFruit` state. The code uses the general update pattern with `data()` joins, `merge()`, `exit()`, and `transition()` for animation, alongside ordinal scales for color and radius mapping.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

A collection of five apples renders as colored circles that animate in size and position on a hover-enabled SVG. This example demonstrates data joins and transitions using D3 v5, where hovering a fruit selects it with a black stroke, and removal or replacement of data points animates smoothly via `transition().duration(1000)`. The code uses `scaleOrdinal` for color and radius mapping, and `selection.enter`, `merge`, and `exit` to manage dynamic fruit data with unique IDs.

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

Bowl of Fruit - Hover to Select

Five apples animate into a row on an SVG canvas, each scaling up to its assigned radius and color through D3 ordinal scales. Hovering highlights a fruit with a black stroke, updating a selected state via mouseover and mouseout events. D3's data join and transitions handle entering, updating, and exiting elements as the dataset changes over time.

NNitin Vadhiya
94% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

SSophia Murage
94% match
Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles appear as a row of apples, rendered with D3 v5 SVG. Hovering over a fruit turns its stroke black, highlighting the selection. Entering and exiting circles animate their radius from and to zero, while a fruit changing type updates its color and size. The code uses D3 selections, data joins, and ordinal scales for color and radius.

IIsmaelHernandezL
94% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit rendered as SVG circles transitions between five apples, shrinking to four after one second, then swapping a lemon into place, and finally removing another apple. Hovering over any fruit selects it with a black outline, and moving the mouse away deselects it. The example uses D3 v6 with a selection-join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate circle positions and radii. State changes are triggered by `setTimeout` calls, while mouseover and mouseout events update the selected fruit via a callback.

EEllednera
94% match
Loading thumbnail…

Bowl Fruit - Hover to select

Five pieces of fruit in a bowl animate between apples and lemons while responding to hover. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, and `selection.join` patterns with `transition` handle enter, update, and exit states. Circle elements grow from radius zero and shrink on removal, with an animated swap from apple to lemon. A black stroke highlights the selected fruit via mouseover events that update a `selectedFruit` variable, triggering a re-render. The example uses plain SVG circles and D3 transitions over one second.

JJefferson Abreu
94% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Rrintisch
94% match