Skip to main content
SimilarExport ZIP
100%

Bowl of fruit : Click to select

✓ Published1🌍 Public
TTomisin Owolabi
Last edited Apr 18, 2020
Created on Apr 18, 2020

Five apples appear in a row, each as a colored circle that expands to its full radius over one second. A click selects a fruit, outlining it in black. Animations, including apple removal and type changes, demonstrate D3's enter, merge, and exit transitions, using a modular selection API and ordinal scales for color and radius.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

MMuhammad Jarir Kanji
94% match
Loading thumbnail…

Bowl Fruit - Click to select

A bowl of fruit shows five apples as colored circles, with a click selecting a fruit and highlighting it with a black stroke. The visualization animates changes: after two seconds one apple is eaten, after three seconds an apple becomes a lemon, and after four seconds another apple disappears. Using d3.v5, the fruitBowl function manages enter, update, and exit selections, applying `transition.attr` to animate circle radii and positions, with `scaleOrdinal` mapping fruit types to colors and sizes.

JJefferson Abreu
94% match
Loading thumbnail…

Bowl of fruit - Click to select

Five apples appear in a bowl and are visually selected by a black outline when hovered. Animations remove one apple, change a second to a lemon, and remove another, with all changes occurring over timed intervals. The D3 v6 code uses `select`, `range`, `scaleOrdinal`, and SVG `circle` elements with chained `.transition()` calls to animate radius and position, while `mouseover` and `mouseout` events trigger a `setSelectedFruit` callback.

MMajaha21
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu
94% match
Loading thumbnail…

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Ggabrielribeirob
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row and animate into a fruit bowl using D3 v5 selections. Mousing over each fruit toggles its selected state, which adds a black stroke around the circle. The example uses `d3.scaleOrdinal` for color, radius, and stroke mapping, and `selection.enter`, `merge`, `exit` with transitions. A `setTimeout` sequence then removes one fruit, changes another to a lemon, and filters out a third, demonstrating dynamic data updates with animated circle radii and positions.

Aarths-glitch
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples as red circles with a black stroke on the selected piece. Clicking any fruit selects it, and the visualization animates changes over time: a fruit is removed after one second, a fruit’s type changes from apple to lemon after two seconds (changing its color and radius via d3.scaleOrdinal scales), and another fruit is filtered out after three seconds. The code uses d3-selection with data joins, transitions on circle attributes (cx, r, stroke), and click event handlers to update the selection state.

NNico Donovan
93% match
Loading thumbnail…

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033
93% match