Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - Hovering

✓ Published1🌍 Public
MMaciek Sitkowski
Last edited Sep 2, 2020
Created on Sep 2, 2020

Five fruit circles enter an SVG as apples and lemons, with mouseover highlighting a selected fruit with a black stroke. The example demonstrates data joins and animated transitions in D3 v5: fruit enters by expanding from radius zero, exits by shrinking, and updates move and recolor via `selection.merge` and `transition`. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `data` keyed by fruit ID to track entering, updating, and exiting elements over time.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover

A bowl of fruit displays five circles that animate into apples and lemons as they enter, resize, and exit the SVG. Hovering over a circle highlights it with a black outline, and the selection state updates the stroke accordingly. The code uses a data join with `selection.data`, `enter`, `merge`, and `exit` transitions, leveraging `transition.attr` for smooth radius and position changes. D3’s `scaleOrdinal` maps fruit types to colors and radii, while mouseover and mouseout events trigger the `setSelectedFruit` state handler.

Nnkohdatavis
96% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

This example demonstrates a data join with smooth SVG transitions as a bowl of fruit updates over time. Circles representing apples and lemons enter, exit, and change type, with color and radius mapped through `d3.scaleOrdinal`. Hovering highlights a fruit by updating a `selectedFruit` state, which triggers a re-render via `fruitBowl`. The code uses `selection.merge`, `transition.attr`, and mouse event listeners within a D3 v6 module.

Eegrebing
95% match
Loading thumbnail…

Bowl of Fruit - Hover to select

A row of fruit circles animates as apples shrink and disappear or transform into lemons, with a black outline highlighting whichever fruit is hovered. The example demonstrates D3 v5 data joins and transitions, using `scaleOrdinal` for color and radius, plus mouse events to update a selected fruit state. SVG circles enter, update, and exit with 1-second transitions as the underlying array changes over time.

Ccornshoots
95% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruit circles in a bowl render as apples and lemons across an SVG canvas. Hovering over a fruit selects it, drawing a black stroke around it, while moving the mouse away deselects it. The example uses d3’s data join with enter, update, and exit selections, and d3-transition’s `transition().duration()` to animate circle radius and position changes over one second. `d3.scaleOrdinal` maps fruit types to colors and sizes.

WWarren-Fitzhenry
95% match
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 enter the bowl and animate to full size using D3 transitions. Hovering strokes a selected fruit black, while the selection state updates through a callback. The example demonstrates data joins and enter/update/exit patterns with `d3.scaleOrdinal` for color and radius, and `transition.attr` for animations. Fruits are removed or mutated over time.

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

Bowl of Fruit - Hover to Select

Five circles representing fruit transition into and out of a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, while the `fruitBowl` function uses D3 v5's data join and `transition().duration(1000)` to animate shape changes. The example demonstrates ordinal scales for mapping fruit type to color and radius.

YYF
95% match