Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select II

✓ Published1🌍 Public
Eegrebing
Last edited Sep 28, 2020
Created on Sep 25, 2020

Five fruit circles render as a bowl of apples and lemons, with each fruit colored and sized by `d3.scaleOrdinal` and positioned via a custom `xPos` function. Clicking a fruit highlights its stroke and calls `onClick` to update the selection state. The example uses D3 v6’s data join with `enter`, `merge`, and `exit` selections, animating radius and position through `.transition().duration(1000)`, while `setTimeout` dynamically removes fruits and swaps an apple for a lemon over three seconds. SVG rendering and event listeners are used throughout.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

A bowl of five apples is rendered as SVG circles; clicking any fruit selects it with a black stroke, while the remaining fruit animate into position over one second. The example demonstrates enter, update, and exit selections with `d3.selectAll` and `transition`, using `scaleOrdinal` for color and radius by fruit type. As timers fire, apples are removed, and one apple transforms into a lemon. The `fruitBowl` function handles click events via an `onClick` callback, and `d3.v6` powers the data joins.

EEllednera
96% 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 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, 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 fruit circles render as apples and lemons in a bowl, with a click selecting a fruit and highlighting it with a black outline. The D3.js code uses a data join with enter, update, and exit selections, animating radius changes via `transition().duration(1000)`. Ordinal scales map fruit types to colors and sizes, while a random ID identifies each element for stable updates across timed data mutations.

JJoachim Klug
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles animate into a row, with apples shown as large red circles and lemons as smaller yellow ones. Clicking a fruit logs its ID and re-renders the selection state. Apples are removed and replaced over timed intervals, demonstrating enter, update, and exit transitions. The example uses d3-selection’s `data` join with key functions, `transition().duration()`, and d3-scale’s `scaleOrdinal` for color and radius mappings, rendering in SVG.

EecoBela
95% match
Loading thumbnail…

Bowl of Fruit: Click to Select

A bowl of fruit demonstrates click-to-select interactions with animated enter, update, and exit transitions. Five apples render as scaled SVG circles via a custom `fruitBowl` module, which uses `scaleOrdinal` for color and radius mappings. Clicking a fruit triggers an `onClick` handler that updates a `selectedFruit` identifier, applying a black stroke highlight. Timed updates replace an apple with a lemon, remove fruits, and re-render using `transition().duration(1000)` with `merge` and `remove` on circle selections.

Bbprokopowicz
95% match