Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public

Last edited Feb 10, 2020

Created on Feb 8, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

MMukund Khandelwal

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.

94% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit is drawn as a set of circles, one per fruit, positioned horizontally and sized by type (apples are larger, lemons smaller). Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3.v5 with a scaleOrdinal color scale for red apples and yellow lemons, and a transition system that animates circle radius and position changes over one second as fruits are removed or altered.

PPedro Ernesto Tramontina

94% match

Loading thumbnail…

Bowl of Fruit-Click to Select

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.

XX. N. Chu

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

94% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

94% match

Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich

94% match