Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Ffbudwill
Last edited May 4, 2020
Created on May 4, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

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

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

Ccyro666
96% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit shows five apples and lemons as colored circles that users can click to highlight with a black stroke. The visualization demonstrates animated enter, update, and exit transitions as fruits are eaten and replaced over time. Built with D3 v5, it uses ordinal scales to map fruit types to fill colors and radii, while selection joins and `transition().duration()` handle the smooth size and position animations.

RReekMajumder
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps
96% match