Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to select

✓ Published1🌍 Public
SSimon Pettersson
Last edited Jan 30, 2022
Created on Jan 30, 2022

This example presents a bowl of fruit where apples and lemons animate their size and color as the dataset updates. A user can click any fruit to select it, which adds a black stroke. The D3 v5 code uses `scaleOrdinal` for color and radius mappings, and applies transitions to smoothly animate entering, exiting, and resizing circles. Array mutations (removing or altering fruit) trigger re-renders, demonstrating dynamic data binding with click-driven selection.

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.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

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

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit where clicking a circle selects it, highlighting it with a black stroke. The visualization uses D3 v5's selection API and ordinal scales to map fruit types to colors and radii, with SVG circles entering through a zero-radius transition and exiting by shrinking. The code demonstrates animated data updates, including removing a fruit, changing an apple to a lemon, and filtering the array, all with 1000-millisecond transitions. The implementation uses `scaleOrdinal`, `selection.selectAll`, and `transition().duration()` to manage the stateful rendering.

BBazarbayevManas
95% match
Loading thumbnail…

Bowl of Fruit - Click To Select

A circular fruit bowl displays apples and lemons that users can click to select, with the chosen fruit highlighted by a thick black stroke. The visualization uses D3.js ordinal scales for color and radius mapping, and animated transitions smoothly resize circles on entry or exit when fruits are removed or replaced. The example animates data changes over time, showing apples being eaten and one apple transforming into a lemon, while maintaining click-based selection throughout the updates.

NNita
94% match
Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski
94% match