Skip to main content
SimilarExport ZIP
100%

Bowl of fruit - Click to select

✓ Published1🌍 Public
DDaniel García
Last edited Mar 23, 2020
Created on Mar 23, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing fruit appear in a row, with apples as large red circles and lemons as smaller yellow ones. Clicking a fruit selects it with a black outline. D3 v5 scales, including `scaleOrdinal`, map fruit types to size and color, while the `fruitBowl` function and `transition` animate circle radius changes. The example uses array updates to add or remove fruit, triggering enter and exit transitions.

SSophia Murage
96% match
Loading thumbnail…

Bowl of fruit Click to Select

Five circles represent fruit in a bowl, starting as red apples and transitioning to a yellow lemon, with the ability to click any fruit to select it. The visualization uses D3 v5 data joins with `transition` to animate circle radii on entry and exit, while `scaleOrdinal` maps fruit types to colors and sizes.

Jjeelong
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez
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
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 circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select #2

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.

Zzlastefcia
95% match
Loading thumbnail…

Bowl of Fruit - click to select

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure
95% match