Bowl of Fruit (Click to Select)

100%

Bowl of Fruit (Click to Select)

✓ Published1🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

Circles representing apples and lemons animate into a bowl-like row, with each fruit shrinking or disappearing as data updates over timed intervals. Clicking any circle selects it, highlighting its stroke in black. The example uses D3 v6 with `scaleOrdinal` for color and radius mapping, and combines enter, merge, and exit selections with 1000ms transitions. SVG rendering and click handlers drive the interactive state changes.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov

96% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit displays colored circles representing apples and lemons, with an animated sequence of removals and a type change. Clicking a fruit selects it by adding a black stroke. The visualization uses d3.scaleOrdinal for color and radius mappings, builds groups with circles and text labels, and updates incrementally via setTimeout. The SVG rendering is generated through d3.select and d3.range, with event handling via `.on('click')`.

Ppkcesar

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

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 dynamic SVG shows a bowl of fruit where apples and lemons animate in and out as data updates. Clicking any fruit selects it, highlighting it with a black stroke. The code uses d3.scaleOrdinal for color and radius mappings, with d3 transitions animating circle positions and radii over one second. Predefined setTimeout events remove apples, mutate one apple into a lemon, and filter out another fruit to demonstrate enter, update, and exit selections.

Jjlspangl

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

95% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel

95% match