Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
JJuyeonee
Last edited Aug 10, 2021
Created on Aug 10, 2021

Five fruit circles appear in a row, rendered as SVG elements colored by fruit type via a `scaleOrdinal` color scale, with apples in red and lemons in yellow. Clicking a circle logs its ID, while pre-scripted `setTimeout` calls dynamically remove circles, change an apple to a lemon, and filter the data array, triggering animated `transition` updates that shrink exiting circles to radius zero. The example uses D3 v7's data join pattern with `selection.enter`, `merge`, and `exit` to sync the visualization with changing data, initializing new circles at radius zero before animating them to their target sizes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate into a row, with apples shown as large red circles and lemons as smaller yellow ones. Clicking a fruit logs its ID and re-renders the selection state. Apples are removed and replaced over timed intervals, demonstrating enter, update, and exit transitions. The example uses d3-selection’s `data` join with key functions, `transition().duration()`, and d3-scale’s `scaleOrdinal` for color and radius mappings, rendering in SVG.

EecoBela
95% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Hhugomell
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that can be clicked to highlight with a black stroke via a selectedFruit ID. The visualization uses d3’s scaleOrdinal for color and radius, a data join with enter/exit transitions to animate circles shrinking to zero radius, and timed updates that remove fruits or change an apple to a lemon. d3.v5 powers the transitions and event handling.

TTomoyukiEguchi
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

MMichał Szumnarski
95% match
Loading thumbnail…

Bowl of Fruit - Click to selected

Five fruit circles transition and animate inside an SVG as apples are removed and one apple becomes a lemon. Clicking any fruit highlights it with a blue stroke, and the selection persists through data updates. Built with D3 v5, the visualization uses a data join with enter, merge, and exit selections, plus `transition().duration()` for size and position animation. Fruit type maps to color and radius via `scaleOrdinal`.

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

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, with apples in red and one lemon in yellow, rendered as an SVG. Clicking any fruit highlights it with a black stroke to mark it as selected. The example uses D3 v5’s data join, `scaleOrdinal` for color and radius, and `transition` to animate enter, update, and exit states. Each fruit carries a random ID, and timed actions remove fruits or change an apple to a lemon.

AAmol Kulkarni
95% match