Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
EEllednera
Last edited Nov 10, 2020
Created on Nov 10, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

Five circles represent apples in an SVG bowl. Clicking one turns its stroke black to mark it selected. The example demonstrates the D3 data join with enter, update, and exit selections, animating circle radius, position, fill, and stroke via `transition().duration()`. Using `scaleOrdinal` for color and size, it removes fruits on a timer, filters an apple, and changes one to a lemon, all rendered with `select` and `fruitBowl`.

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

Bowl of Fruit - Click to Select

Five pieces of fruit rendered as SVG circles sit in a row, and clicking one selects it with a black outline. The example demonstrates a stateful selection pattern using D3 v7’s `scaleOrdinal` for color and radius, and a 1000ms transition for entrance, exit, and updates. Over four timed steps, an apple is removed, a lemon replaces an apple, a lemon is added, and another apple is deleted. The `fruitBowl` function handles `enter`, `merge`, and `exit` selections, and `on('click')` triggers a callback to update the `selectedFruit` state.

Ssheafallick
96% match
Loading thumbnail…

Bowl of Fruit: Click to Select

A bowl of fruit demonstrates click-to-select interactions with animated enter, update, and exit transitions. Five apples render as scaled SVG circles via a custom `fruitBowl` module, which uses `scaleOrdinal` for color and radius mappings. Clicking a fruit triggers an `onClick` handler that updates a `selectedFruit` identifier, applying a black stroke highlight. Timed updates replace an apple with a lemon, remove fruits, and re-render using `transition().duration(1000)` with `merge` and `remove` on circle selections.

Bbprokopowicz
96% match
Loading thumbnail…

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Ggabrielribeirob
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.
96% match