Bowl of Fruit-Click to Select

100%

Bowl of Fruit-Click to Select

✓ Published0🌍 Public

Last edited Jun 22, 2020

Created on Jun 22, 2020

Forked from Bowl of Fruit-General Update Pattern

A bowl of fruit rendered as SVG circles uses D3 v5 to encode fruit type through color and size: apples appear red and large, lemons yellow and small. The scatterplot-like display animates through timed state changes, removing an apple, converting another to a lemon, and filtering a third. The example demonstrates incremental updates with `selection.enter`, `merge`, and `exit` methods, while ordinal color and radius scales map categorical data to visual channels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

Ggilbster

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

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A set of fruit shapes animate into a bowl using SVG circles. Each fruit is rendered with a color and radius determined by its type via `d3.scaleOrdinal`, with apples appearing red and larger, lemons yellow and smaller. Clicking a fruit selects it, applying a black stroke, and triggers a callback that re-renders the visualization. The example demonstrates the D3 general update pattern: new fruits enter with a 2-second radius animation, exiting fruits shrink away over 1 second, and changes to existing fruit types update smoothly through the merged enter/update selection.

Rrebeccayc

94% match

Loading thumbnail…

Bowl of Fruit - CLick to select

This interactive D3.js example displays a bowl of fruit as colored circles, where apples render in red and lemons in yellow, with size encoding fruit type. Users can click or hover over a fruit to select it, which adds a black outline around the chosen circle. The visualization uses D3's ordinal scales for color and radius mapping, and animates circle transitions with the `.transition()` API. Data changes over time, automatically removing fruits and swapping an apple for a lemon, demonstrating dynamic updates with enter, merge, and exit states in SVG.

AAaron Goebel

94% match

Loading thumbnail…

Bowl of Fruit (Click to Select)

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.

BBKirst3

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

94% match