Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to select

✓ Published1🌍 Public
EEdoardoRegini
Last edited Apr 8, 2020
Created on Apr 8, 2020

Five fruit circles, apples and lemons, render in a row as an SVG visualization. Clicking a fruit selects it and gives it a black outline. The example demonstrates data joins with `selection.data`, enter/exit transitions using `transition.attr`, and an ordinal color scale from `d3.scaleOrdinal`. Fruits are dynamically removed or changed in type over time, with animated resizing and repositioning for visual feedback.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - click select

Five fruit circles render in an SVG as a bowl of apples and lemons, with click selection to highlight a fruit with a black outline. The example demonstrates data joins and transitions using D3 v5, with circles entering, exiting, and updating via `selection.data`, `transition.attr`, and a custom `fruitBowl` module. Color and radius scales map fruit types to visual properties, while timed actions remove, replace, and filter the underlying array to animate changes.

AAndrew Fletcher
96% 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
96% 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
96% match
Loading thumbnail…

Bowl of Fruit - Click to selected

Five fruit circles transition and animate inside an SVG as apples are removed and one apple becomes a lemon. Clicking any fruit highlights it with a blue stroke, and the selection persists through data updates. Built with D3 v5, the visualization uses a data join with enter, merge, and exit selections, plus `transition().duration()` for size and position animation. Fruit type maps to color and radius via `scaleOrdinal`.

YYifu Chen
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that shrink away, change to lemons, and are removed. Clicking any fruit selects it, highlighting it with a black outline. Updates use D3 v5 data joins with `enter`, `merge`, and `exit`, relying on ordinal scales for color and radius. All position and size changes animate over one second via `transition().duration(1000)`.

ZZ-Richard
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples and a lemon render as colored circles, with a black outline marking the currently selected fruit. Clicking any fruit selects it, and items animate in and out of the bowl over time as apples are eaten or replaced. The visualization uses D3 v5’s data join with `selection.enter`, `merge`, and `exit` methods, transitioning circle radii and positions via `transition.attr`. An ordinal color scale maps fruit types to specific hex values, while the SVG canvas and its circle elements update dynamically.

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

Five fruit circles render as apples and lemons in a bowl, with a click selecting a fruit and highlighting it with a black outline. The D3.js code uses a data join with enter, update, and exit selections, animating radius changes via `transition().duration(1000)`. Ordinal scales map fruit types to colors and sizes, while a random ID identifies each element for stable updates across timed data mutations.

JJoachim Klug
95% match