Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select #2

✓ Published1🌍 Public
Zzlastefcia
Last edited Sep 14, 2020
Created on Sep 14, 2020

The visualization displays five fruit circles in a bowl; clicking one selects it, shown with a black border. Animated transitions shrink, remove, or alter fruit types (apple to lemon) over time. Built with D3 v5, it uses `scaleOrdinal` for color and radius, the `select`/`merge`/`transition` API for smooth SVG updates, and mouse click handlers to manage selected state.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to select

A dynamic bowl of fruit shows five circles—apples and lemons—that rearrange and resize over time as items are removed or change type. Clicking any fruit selects it, highlighting the chosen circle with a black stroke. The visualization uses D3 v5’s `select`, `range`, `scaleOrdinal`, and transitions to animate circle positions and radii, with an SVG render and JavaScript timers driving the scripted state changes.

Ccornshoots
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

Five circles representing fruit appear in a row and animate to their full size. Clicking a circle selects it, drawing a black outline around that fruit. The example uses D3 v5 with data joins and transitions to update the visualization, while `scaleOrdinal` maps fruit types to colors and sizes. Over time, the data changes to remove fruit or change one apple to a lemon.

DDaniel García
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 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

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

A bowl of fruit displays five circles representing apples and lemons, each clickable to select and highlight with a black stroke. The visualization uses D3 v6 with SVG rendering and animation, employing `scaleOrdinal` for color and radius mapping based on fruit type. State changes include eating an apple and replacing one with a lemon, triggering enter, update, and exit transitions that animate radius from zero to full size over one second.

PPiotr Paszek
95% match