Skip to main content
SimilarExport ZIP
100%

Bowl of fruits - click to select

✓ Published2🌍 Public
Aaxliao
Last edited Jul 14, 2019
Created on Jul 14, 2019

A bowl of fruits animation shows a row of apples that can be selected by clicking, highlighting the chosen fruit with a blue stroke. The visualization begins with five apples, then removes one, changes another to a lemon, and later filters out an additional apple, demonstrating dynamic updates to the dataset. The implementation uses d3.scaleOrdinal for color and radius mapping, d3.select and selection transitions with 1000ms duration to animate the circles' positions and sizes as they appear and disappear.

AI-generated description

Click to Select

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

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji
94% match
Loading thumbnail…

Bowl of Fruits: Click to Select

A bowl of fruits displays five apples with an animated entrance, then removes one after a second, swaps an apple for a lemon at two seconds, and deletes another fruit immediately afterward. Clicking any fruit highlights it with a black outline and re-renders the selection. The visualization uses D3 v5 with `select`, `range`, and `scaleOrdinal` APIs, alongside SVG `circle`, `text`, and `rect` elements, plus D3 transitions for smooth position and appearance changes.

Ppeterjchan
94% 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
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
Loading thumbnail…

Bowl of Fruit - Click to Select

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.

NNico Donovan
94% match
Loading thumbnail…

Bowl of Fruit - click to select

A bowl of five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

1123fischer
94% match