Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public
Ssiddharth171
Last edited Jul 25, 2020
Created on Jul 25, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of fruit - hover to Select

A bowl of five apples is rendered as SVG circles that shrink and grow with a one-second transition. Hovering over a fruit selects it, drawing a black stroke, and moving the mouse away clears the selection. The example uses `d3.scaleOrdinal` for color and radius, `selection.merge`, and `transition.attr` to animate updates, while `setTimeout` events remove or replace fruits to demonstrate enter, update, and exit behavior. Data is generated in `index.js` with random IDs.

LLiu2021311512
95% 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
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 - Hovering

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.

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

Bowl of Fruit: Hover to select

A bowl of fruit demonstrates animated SVG transitions and mouse interaction. Five circles, initially apples, move, resize, and change color over time; one apple becomes a lemon, and fruits are removed. Hovering over any circle highlights it with a black stroke and updates a `selectedFruit` state, triggering a re-render. The example uses D3 v5's `select`, `scaleOrdinal`, and `transition` APIs, rendering with SVG and animating circle radius, color, and position over one-second durations.

AAjit Singh
95% match