Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit - Click to Select.js

Public visualization

Bowl of Fruit - Click to Select.js

0 stars0🌍 Public
Xxsg13
Last edited Dec 15, 2020
Created on Dec 15, 2020

Five apples are displayed in a row within an SVG bowl, and hovering over a fruit selects it with a black stroke. D3’s data join uses `selection.data` with a key function, and `merge` handles updates while `exit` transitions shrink removed fruits. Interactions trigger `setSelectedFruit` on mouseover and mouseout, and timed callbacks mutate the data array to remove apples or replace one with a lemon. The code relies on `scaleOrdinal` for color and radius, with `transition` animating position and size over one second.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed