Skip to main content
SimilarExport ZIP
100%

Hey there, fruity hovery selecty!

✓ Published0🌍 Public
OOhayouKaminari
Last edited Feb 7, 2020
Created on Feb 7, 2020

A fruit bowl of five apples and one lemon demonstrates interactive selection and dynamic data updates with animated transitions. D3.js binds circles to fruit data, using ordinal scales for color and radius, while mouseover and mouseout events set a selected fruit ID that triggers a stroke highlight. The `fruitBowl` function manages enter, update, and exit selections, animating circle radii and positions over 1000 milliseconds as fruits are removed or type-changed.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hower to Select

A bowl of fruit demonstrates interactive selection and data updates. Apples and lemons appear as colored circles, with a black outline highlighting the fruit under the mouse. The example uses D3 v5 with a `scaleOrdinal` for colors and radii, and `transition().duration()` for smooth enter, update, and exit animations. The data is simulated client-side with `Math.random()` IDs, and selection changes trigger a re-render via `setSelectedFruit`. Apples are removed and a lemon replaces one apple over time, showing live updates.

Ccyro666
92% match
Loading thumbnail…

Hey there, fruity clicky selecty!

Five apples animate into a row, then one disappears, another transforms into a lemon, and clicking any fruit highlights it with a black outline. The example uses D3 v5’s data join with `enter`, `merge`, and `exit` selections, ordinal color and radius scales, and `transition().duration()` for smooth circle resizing and repositioning. The `fruitBowl` function handles click events via an `onClick` callback, while `setTimeout` triggers array mutations to demonstrate live updates.

OOhayouKaminari
92% match
Loading thumbnail…

Bowl of fruit - hover to select

Five fruit circles, initially all apples, transition between fruit types and removal over time, with hover interactions selecting a fruit and highlighting it with a black stroke. The example uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius mapping, and `selection.transition().duration(1000)` to animate entering, updating, and exiting elements in SVG. Apples are eaten and replaced by a lemon through timed updates, demonstrating dynamic data binding and interactive selection.

HHasideluxe
91% match
Loading thumbnail…

Bowl of Fruit-Click to Select

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

XX. N. Chu
91% match
Loading thumbnail…

Bowl of fruit general Click to select.js!

A dynamic fruit bowl visualization updates in real time as apples are eaten and replaced by lemons. Each fruit is rendered as an SVG circle with color and radius scales mapping fruit type to visual attributes. Users click circles to select them, which triggers a black stroke highlight. The code uses D3 v5's data join, ordinal scales, and transitions to animate circle entries, exits, and updates smoothly over one-second durations.

Ddanhuijia
91% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates D3.js data joins and interactive selection. Five apples render as circles that transition in size and position over time, with one apple morphing into a lemon and others disappearing. Clicking any fruit highlights it with a black stroke. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition.attr` to animate SVG circles, plus `scaleOrdinal` for color and radius mappings.

AArriannePandaraoan
91% match
Loading thumbnail…

Bowl of Fruit - Hover to Select

Hovering over a circle highlights it with a black outline to select the fruit, and moving the mouse away deselects it. The visualization animates fruit entering, exiting, and changing type using D3 v5’s data join and `transition` methods, with scales for color and radius. Apples are red and larger than yellow lemons, arranged in a row. The `fruitBowl` function manages the SVG circles, while `index.js` drives updates through timed `setTimeout` events that remove or replace fruit.

HHeechan lee
91% 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
91% match