Skip to main content
SimilarExport ZIP
100%

Fork of Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Ggharakhani1986
Last edited Jul 18, 2022
Created on Jul 18, 2022

A circle represents each fruit, with apples and lemons distinguished by color and size, and clicking a fruit selects it by adding a black stroke. The visualization uses D3 v5 with a data join to update SVG circles across timed changes that remove fruits, replace an apple with a lemon, and filter the array. Transition methods animate radius and x-position changes, while ordinal scales map fruit type to color and radius.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection with animated transitions as apples and lemons appear, change, and disappear over time. Users click any fruit to highlight it with a black stroke. The visualization uses SVG circles with a D3 v5 data join, updating enter, update, and exit states via transitions on circle radius and position, with `scaleOrdinal` mapping fruit types to colors and sizes.

Ssgzzhinde
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
93% match
Loading thumbnail…

Fork of Fork of Bowl of fruit - Click to Select D3.js!

Five circles render as apples and lemons in an SVG bowl, with clicks selecting a fruit by highlighting its black stroke. D3.js v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration(1000)` animates circle entry, exit, and resizing. The `fruitBowl` module uses data joins, `on('click')` handlers, and timed `setTimeout` calls to dynamically add, remove, or mutate fruit data, triggering re-renders.

CCarloWK1202
93% match
Loading thumbnail…

Fork of Bowl of fruit - Hover to select

This example shows a bowl of five fruit represented as animated SVG circles. Each circle is colored and sized by its type—apples are red and large, lemons are yellow and small—using `d3.scaleOrdinal` for both color and radius. The visualization responds to user clicks: clicking a fruit highlights it with a black outline, and the fruit bowl changes over time as fruits are removed or replaced. The animation uses D3 v6 transitions to shrink exiting fruits and grow entering ones.

MMajaha21
93% 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
93% match
Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example shows a row of five apples rendered as SVG circles that transition between states over time. Clicking a fruit selects it with a black stroke, while the dataset changes through timed updates: fruits disappear, a lemon replaces an apple, and positions shift. The visualization uses D3 v5 with `scaleOrdinal` for color and radius, plus `transition().duration()` to animate entering, updating, and exiting circles.

Cchristina030
93% 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
93% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic fruit bowl displays five circles representing apples and lemons, with each fruit scaled by type and color-coded via a categorical scale. Clicking a fruit selects it and adds a black stroke. The visualization uses D3’s selection API to incrementally update the SVG, animating radius and position changes over one-second transitions as fruits are eaten or replaced, demonstrating stateful, event-driven interactions.

Ssakhabutdinov
93% match