Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
LLucas Meirelles
Last edited Sep 2, 2020
Created on Sep 2, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select.js

Five fruit circles sit in a beige bowl shape rendered as an SVG rectangle with rounded corners. Clicking any piece of fruit selects it, highlighting that fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for fruit color and radius, `selection.data` with a key function for enter/update/exit transitions, and `transition.duration` to animate fruit removal or type changes from apple to lemon after timed delays.

Dddperdue
96% match
Loading thumbnail…

Bowl of Fruit - click to select

Five fruit circles appear in a row, each clickable to select it with a black stroke. Animate with d3 v5 transitions, the bowl updates over time as apples are eaten or replaced by lemons. The code uses `scaleOrdinal` for color and radius, binds data by `id`, and implements enter, update, and exit selections with SVG circles.

Ggregosaure
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.
96% 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 select

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.

AAndrew Fletcher
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row inside an SVG bowl; clicking a fruit highlights its outline in black. The view updates when a piece is removed or one apple changes into a lemon. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and chained `transition()` calls to animate entering, exiting, and resizing circles. Clicking triggers a callback that re-renders the bowl via the exported `fruitBowl` function.

Ffernandotsurukawa
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples, with two later replaced by a lemon or removed entirely, demonstrating D3's data join. Clicking any fruit toggles a dark blue selection stroke, triggering a re-render via the `fruitBowl` module. The code uses `d3.scaleOrdinal` for color and radius, `selection.merge`, and `transition` for animated position and size changes over one second. SVG rendering with `d3.select` and `setTimeout` drives the scripted state updates.

RRubens
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, starting as apples that can be clicked to highlight with a black stroke via a selectedFruit ID. The visualization uses d3’s scaleOrdinal for color and radius, a data join with enter/exit transitions to animate circles shrinking to zero radius, and timed updates that remove fruits or change an apple to a lemon. d3.v5 powers the transitions and event handling.

TTomoyukiEguchi
95% match