Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit Click to Select

✓ Published0🌍 Public
Ggabrielribeirob
Last edited Sep 20, 2021
Created on Sep 20, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

Five pieces of fruit sit in an animated bowl, rendered as circles whose radius and fill come from d3.scaleOrdinal based on fruit type. Clicking an apple or lemon triggers an onClick handler that sets the selected fruit, which receives a thick black stroke via a data join and transition. The example also demonstrates enter, update, and exit selections by removing apples and changing one apple to a lemon at timed intervals, all using d3.transition for smooth radius and position animations.

JJordan Chiu
96% 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
96% match
Loading thumbnail…

Bowl Fruit - Click to select

A bowl of fruit shows five apples as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization animates changes: after two seconds one apple is eaten, after three seconds an apple becomes a lemon, and after four seconds another apple disappears. Using d3.v5, the fruitBowl function manages enter, update, and exit selections, applying `transition.attr` to animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes.

JJefferson Abreu
96% match
Loading thumbnail…

Bowl of Fruit Click to Select

A bowl of fruit displays five apples in a row, and clicking any fruit selects it with a black outline. Over time, the apples disappear one by one, and a middle apple transforms into a lemon, with smooth transitions animating the circle radii and positions. The visualization uses d3 v5 with React, rendering SVG circles via the `fruitBowl` module and scales like `scaleOrdinal` for color and radius. Selection handles click events, while enter, merge, and exit transitions animate changes at a 1000-millisecond duration.

JJake
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples and a lemon render as colored circles, with a black outline marking the currently selected fruit. Clicking any fruit selects it, and items animate in and out of the bowl over time as apples are eaten or replaced. The visualization uses D3 v5’s data join with `selection.enter`, `merge`, and `exit` methods, transitioning circle radii and positions via `transition.attr`. An ordinal color scale maps fruit types to specific hex values, while the SVG canvas and its circle elements update dynamically.

Ffbudwill
95% match