Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Rrainyrainyguo
Last edited Nov 15, 2020
Created on Nov 15, 2020

A row of five apples animates into view, with one apple replaced by a lemon and two apples removed over time, illustrating join-based updates. Hovering over a fruit highlights it with a black stroke and clears the selection on mouseout. The example uses D3 v6 with `select`, `range`, and `scaleOrdinal` for color and radius, while `transition.attr` animates circle positions and radii in SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez
96% match
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
96% 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
96% 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
95% match
Loading thumbnail…

Bowl of Fruit - hover select

Five apples animate into a row; hovering highlights a fruit with a black outline, and clicking away removes the selection. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and `transition` for entering, updating, and exiting circles. Apples and lemons are represented as SVG circles, with mouseover and mouseout events triggering a selection state that re-renders the bowl.

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

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj
95% match
Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and one lemon sit in a row, animated with a one-second transition as fruit is eaten or replaced. Hovering any piece outlines it in black, with a click-free selection handled through `mouseover` and `mouseout` events. The D3 v5 code uses `select`, `range`, `scaleOrdinal`, and `transition` to manage enter, update, and exit selections on SVG circles, with color and radius scales mapping fruit type to visual properties.

YYifei Liu
95% match