Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public
AAmol Kulkarni
Last edited Jun 23, 2020
Created on Jun 23, 2020

Five fruit circles appear in a row, with apples in red and one lemon in yellow, rendered as an SVG. Clicking any fruit highlights it with a black stroke to mark it as selected. The example uses D3 v5’s data join, `scaleOrdinal` for color and radius, and `transition` to animate enter, update, and exit states. Each fruit carries a random ID, and timed actions remove fruits or change an apple to a lemon.

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

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

Bowl of Fruit - Click to Select

Five circles representing fruit sit in a row across an SVG canvas. Clicking an apple or lemon adds its ID to a selected set, drawing a black outline around it. The bowl animates over time as apples are removed and one apple is replaced by a lemon, using D3 v5's `data` join, `transition()` with a 1000-millisecond duration, and `scaleOrdinal` for color and radius mapping.

RRobert Curtis
96% match