Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - click select

✓ Published1🌍 Public
AAndrew Fletcher
Last edited Jan 15, 2020
Created on Jan 15, 2020

Five fruit circles render in an SVG as a bowl of apples and lemons, with click selection to highlight a fruit with a black outline. The example demonstrates data joins and transitions using D3 v5, with circles entering, exiting, and updating via `selection.data`, `transition.attr`, and a custom `fruitBowl` module. Color and radius scales map fruit types to visual properties, while timed actions remove, replace, and filter the underlying array to animate changes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to select

Five fruit circles, apples and lemons, render in a row as an SVG visualization. Clicking a fruit selects it and gives it a black outline. The example demonstrates data joins with `selection.data`, enter/exit transitions using `transition.attr`, and an ordinal color scale from `d3.scaleOrdinal`. Fruits are dynamically removed or changed in type over time, with animated resizing and repositioning for visual feedback.

EEdoardoRegini
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of five apples renders as SVG circles, and clicking a fruit selects it with a black stroke. The example demonstrates data joins and transitions in D3 v7: apples shrink and vanish when eaten, and one apple is replaced by a lemon after two seconds, updating its fill and radius. The fruitBowl module uses `selection.enter`, `selection.exit`, and `transition.attrTween` to animate circle radii and positions, while a `scaleOrdinal` maps fruit types to colors and sizes. Click events trigger a re-render, highlighting the selected fruit.

TToooooooT
96% 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
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl, transitioning in size and position as apples are removed or swapped for lemons over timed intervals. Clicking a circle selects it, drawing a black stroke around the chosen fruit; the code tracks the selected ID and re-renders via `fruitBowl`. It uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge` for updating entered and existing nodes, and `transition.attr` for animated enter, update, and exit states.

JJames Barbour, Jr.
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 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
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in an SVG bowl. Clicking one turns its stroke black to mark it selected. The example demonstrates the D3 data join with enter, update, and exit selections, animating circle radius, position, fill, and stroke via `transition().duration()`. Using `scaleOrdinal` for color and size, it removes fruits on a timer, filters an apple, and changes one to a lemon, all rendered with `select` and `fruitBowl`.

WWarren-Fitzhenry
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG bowl and animate into position using D3 v5 data joins. Clicking a fruit selects it, highlighting the circle with a black stroke. The code uses `scaleOrdinal` for color and radius, `transition().duration()` for smooth updates, and keyed data joins to handle entering, updating, and exiting elements across timed state changes.

LLucas Meirelles
95% match