Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
NNico Donovan
Last edited Jul 14, 2020
Created on Jul 14, 2020

A bowl of fruit displays five apples as red circles with a black stroke on the selected piece. Clicking any fruit selects it, and the visualization animates changes over time: a fruit is removed after one second, a fruit’s type changes from apple to lemon after two seconds (changing its color and radius via d3.scaleOrdinal scales), and another fruit is filtered out after three seconds. The code uses d3-selection with data joins, transitions on circle attributes (cx, r, stroke), and click event handlers to update the selection state.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl Fruit - Click to select

A bowl of fruit shows five apples as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization animates changes: after two seconds one apple is eaten, after three seconds an apple becomes a lemon, and after four seconds another apple disappears. Using d3.v5, the fruitBowl function manages enter, update, and exit selections, applying `transition.attr` to animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes.

JJefferson Abreu
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

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.

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

Bowl of Fruit - Click to Select and to Deselect

Five fruit circles appear in a row, initially all apples, then one changes to a lemon and two apples are removed over time. Clicking a fruit selects it with a dark blue stroke, and clicking the selected fruit again deselects it. The visualization uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate enter, update, and exit states.

RRubens
95% 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

A bowl of fruit visualization demonstrates animated selection and data updates. Five circles representing apples and lemons move horizontally, with the selected fruit highlighted by a black stroke. The view uses d3.select and d3.range to generate initial data, with scaleOrdinal mapping fruit types to colors and radii. Fruit removal, type changes, and interactive clicking trigger transitions via d3.transition().duration, animating circle positions and sizes over one-second intervals. The implementation uses React, SVG rendering, and D3 v5.

Jjeelong
95% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit displays five apples as red circles that are transformed over time; one apple is eaten, another is replaced by a lemon, and a third is removed, with each change animated via a 1000ms transition. Clicking any circle logs its unique ID to the console. The visualization uses D3 v7’s `scaleOrdinal` for color and radius mappings, `selection.data` with key functions, and `transition.attr` to animate circle positions and sizes.

VVamsiYandapalli
94% match