Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
MMiish84
Last edited Apr 8, 2020
Created on Apr 7, 2020

The visualization shows a bowl of fruit where individual apples and a lemon can be clicked to select them, highlighting the chosen fruit with a thick black stroke. The fruit bowl updates over time as apples are removed or replaced, demonstrating data join transitions. Built with d3.v5, the example uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and event handlers on circles for click interactions.

AI-generated description
MIT Licensed

Similar vizzes

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

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a bowl of fruit where clicking on an apple or lemon selects it, highlighting the chosen piece with a black outline. The visualization animates changes to the fruit data over time, including removal, type changes, and addition, using transitions on the circles. Built with React and D3 v5, it uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and D3’s `selection.merge` pattern for enter-merge-exit updates. The bowl is rendered as a rounded rectangle, with fruit positioned horizontally.

AAnShed
95% match
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

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

Bowl of Fruit - Click to select

Five pieces of fruit sit in a bowl as colored circles, each clickable to select and highlight with a black stroke. As time passes, apples are removed, and one apple changes into a lemon, demonstrating data joins with enter, update, and exit selections. The visualization uses d3.scaleOrdinal for color and radius mapping, and d3 transitions animate the circle radii over one second. The code relies on d3 v5 and SVG rendering.

NNikki-gea
95% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five apples sit in a bowl, each clickable to toggle a black selection outline. Over time, the dataset changes as fruits are removed and one apple transforms into a lemon, with all updates animated via D3 v5 transitions. The visualization uses d3.scaleOrdinal for color and radius, binds data through selection joins, and applies 1-second transition tweens to reposition groups and resize circles. Click events are handled with D3's event naming system, and SVG shapes render the bowl and fruit.

RRohit Reddy Gottam
95% match
Loading thumbnail…

Bowl of fruit - click to select

A bowl of fruit displays five apples as red circles, which users can click to highlight with a black stroke. Over time, apples disappear and one transforms into a lemon, demonstrating dynamic data updates. The visualization uses D3 v5 with a modular import of `scaleOrdinal` for color and radius scales, while `select`, `range`, and `transition` handle SVG circle creation, removal, and animated resizing. Selection state triggers re-rendering via a callback, showcasing enter, update, and exit patterns.

HHasideluxe
95% match