Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - Click to select

✓ Published0🌍 Public
IIgor Borzunov
Last edited Aug 22, 2020
Created on Aug 22, 2020
Forked from Bowl of fruit

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

Bowl of fruit - Click to select

This example shows a bowl of fruit where viewers can hover over apples and a lemon to select them, highlighting the chosen fruit with a black stroke while the others remain unhighlighted. The visualization animates changes in the fruit bowl over time, with fruits being removed and an apple transforming into a lemon. Built with D3 v5, it uses an SVG rendering approach with scales like `scaleOrdinal` for color, radius, text, and font size, alongside `transition().duration()` to smoothly animate position, radius, and text size changes for enter, update, and exit selections.

AAnthony-coding
96% 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
95% 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
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

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

AAaron Goebel
95% match
Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo
95% match