Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Jjlspangl
Last edited Sep 2, 2021
Created on Sep 2, 2021

A dynamic SVG shows a bowl of fruit where apples and lemons animate in and out as data updates. Clicking any fruit selects it, highlighting it with a black stroke. The code uses d3.scaleOrdinal for color and radius mappings, with d3 transitions animating circle positions and radii over one second. Predefined setTimeout events remove apples, mutate one apple into a lemon, and filter out another fruit to demonstrate enter, update, and exit selections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov
95% match
Loading thumbnail…

Bowl of Fruit (Click to Select)

Circles representing apples and lemons animate into a bowl-like row, with each fruit shrinking or disappearing as data updates over timed intervals. Clicking any circle selects it, highlighting its stroke in black. The example uses D3 v6 with `scaleOrdinal` for color and radius mapping, and combines enter, merge, and exit selections with 1000ms transitions. SVG rendering and click handlers drive the interactive state changes.

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

Bowl of Fruit-Click to Select

This example demonstrates a dynamic fruit bowl visualization where users can click on apples or lemons to select them, highlighting the chosen fruit with a black outline. The bowl renders as a rounded rectangle with fruit circles labeled by type, using D3.js scaleOrdinal for consistent color and radius mapping. The scene animates over time as fruits are removed, replaced, or modified through setTimeout calls. Built with d3.v5, it employs SVG rendering and transition animations, with DOM manipulation handled through d3.select and d3.range methods.

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

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

Ffeizhi123
95% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

BBrett
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a click-to-select interaction with animated transitions. Apples and lemons render as colored circles using D3 v5's `scaleOrdinal` for color and radius, with smooth 1-second transitions on enter, update, and exit. Users click a fruit to highlight its selection with a black stroke. The code uses `selection.data`, `merge`, and `transition` to animate changes, while a script removes, replaces, and reorders fruits over time to show dynamic updates.

YYF
94% match