Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select.js

✓ Published0🌍 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
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

EEllednera
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as SVG circles, and clicking a fruit selects it with a black stroke. The example demonstrates data joins and transitions in D3 v7: apples shrink and vanish when eaten, and one apple is replaced by a lemon after two seconds, updating its fill and radius. The fruitBowl module uses `selection.enter`, `selection.exit`, and `transition.attrTween` to animate circle radii and positions, while a `scaleOrdinal` maps fruit types to colors and sizes. Click events trigger a re-render, highlighting the selected fruit.

TToooooooT
95% match
Loading thumbnail…

Bowl of Fruit: Click to select

Five apples and a lemon appear as colored circles in an SVG bowl, where clicking any fruit selects it with a black stroke outline. The example demonstrates animated data joins with D3 v5, using `scaleOrdinal` for color and radius mappings, `transition.attr` for smooth enter/exit animations, and event handlers on merged selections to update the selected fruit state.

AAjit Singh
95% match
Loading thumbnail…

Bowl of fruit - hover to select

Five apples in a bowl render as SVG circles whose size and color map to fruit type via `d3.scaleOrdinal`. Hovering over a fruit calls the `setSelectedFruit` prop, redrawing the selection with a black stroke. Using D3 v5 data joins and `transition`, the visualization animates changes over time—removing fruit, replacing an apple with a lemon, and deleting another—while text labels update via `.merge()` on enter/update selections.

WWhitney Hung
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 select

Five apples animate into a row; hovering highlights a fruit with a black outline, and clicking away removes the selection. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and `transition` for entering, updating, and exiting circles. Apples and lemons are represented as SVG circles, with mouseover and mouseout events triggering a selection state that re-renders the bowl.

AAndrew Fletcher
95% match
Loading thumbnail…

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji
95% match