Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
Iianleekq
Last edited Feb 20, 2019
Created on Feb 20, 2019

Five circles representing fruit enter the SVG with a 1-second transition, each colored by a d3.scaleOrdinal mapping apples to red and lemons to yellow. Clicking a circle selects it, applying a black stroke via the data join and transition. The scene’s data updates are arranged with setTimeout: apples are removed from the end, the third fruit changes type to a lemon, and another apple is filtered out, demonstrating enter, update, and exit transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles representing apples transition into view in an SVG bowl, with each fruit selectable by mouseover and mouseout events that toggle a black stroke. The code uses d3 data joins and ordinal scales to map fruit types to colors and radii, while transition methods animate circle entry and exit. Over time, fruits are removed or replaced with lemons via JavaScript timers, demonstrating animated updates to the bound dataset.

Ffeizhi123
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 fruit circles enter as apples with a radius of zero, then grow into place while a black stroke marks clicked selections. Using d3 v5’s data join with object constancy, the fruitBowl module renders SVG circles and animates enter, update, and exit transitions via `transition().duration(1000)`. A sequential script eats apples and replaces one with a lemon, demonstrating ordinal color and radius scales. Clicking toggles a fruit’s selection state, re-rendering with updated strokes.

NNikkor
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

MMichał Szumnarski
95% match
Loading thumbnail…

Bowl of Fruit - Interaction(Click to Select)

Five circles representing apples enter an SVG bowl, then shrink away or morph into a lemon through scripted timeouts while a click selects a fruit with a black stroke. The example uses d3 v5’s data join, scaleOrdinal for color and radius, and transition().duration(1000) to animate enter, update, and exit states. A click event triggers a re-render, updating the selected fruit’s stroke.

MMinwoo Pak
95% match
Loading thumbnail…

Bowl of fruit. Click to Select

Five circles represent apples in a bowl, rendered as red SVG circles using d3.scaleOrdinal for color and radius. Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3 transitions to animate enter, update, and exit states, with fruits shrinking to zero radius on removal. Over three seconds, the code programmatically removes apples and changes one to a lemon, demonstrating data joins with d3.v5.

AAlex Arobelidze
94% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing apples and lemons transition in size as the data updates, with click selection highlighting the chosen fruit with a black stroke. The D3.js v5 code uses a data join with enter, update, and exit selections, applying ordinal scales for color and radius. A one-second transition animates circle radius and x-position changes, while a timer updates the array by removing and modifying fruit types.

Hhugomell
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate between a bowl arrangement and removal, with each apple and lemon rendered as an SVG circle. The d3.js code uses a shared fruitBowl function with a click handler to highlight the selected fruit with a black stroke. Transitions employ the D3 update pattern with enter, merge, and exit selections to smoothly animate radius and position changes over one-second durations. The colorScale and radiusScale ordinals map fruit types to their visual properties.

MMukund Khandelwal
94% match