Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - hover to Select

✓ Published0🌍 Public
LLiu2021311512
Last edited Apr 23, 2022
Created on Apr 23, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

Bowl of Fruit - Hover to Select

Five apples and one lemon sit in a row as SVG circles, colored by type and scaled by radius. Hovering any fruit highlights it with a black stroke and triggers a callback to update the selection state. Entering, updating, and exiting fruits are animated through `transition().duration(1000)` on radius and x-position. The example uses D3 v5 with `scaleOrdinal`, data joins, and ES6 modules, driven by timed state changes that eat and replace fruits.

CChenluWang96
95% match
Loading thumbnail…

Bowl of fruit - hover to select

A bowl of fruit renders as five apples in SVG, with hover highlighting the selected fruit by adding a black stroke. The code uses d3.scaleOrdinal for color and radius mapping, and transitions animate fruit entry, exit, and replacement. Over time, apples are removed and one becomes a lemon, with d3 data joins handling updates via keyed selection and transition.attr for radius changes.

BbeauMarko
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
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