Bowl of fruit - Click to select

100%

Bowl of fruit - Click to select

✓ Published1🌍 Public

Last edited Sep 25, 2020

Created on Sep 25, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - click to select

Five fruit circles render as apples and a lemon, with an ordinal scale mapping fruit types to colors and radii. Clicking a fruit selects it, drawing a black stroke around that circle, while the join uses d3 transitions to animate enter, update, and exit states. The data array mutates over time to demonstrate keyed joins and animated updates.

IIsmaelHernandezL

97% 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

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu

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 circles representing fruit appear in a row, with apples as large red circles and lemons as smaller yellow ones. Clicking a fruit selects it with a black outline. D3 v5 scales, including `scaleOrdinal`, map fruit types to size and color, while the `fruitBowl` function and `transition` animate circle radius changes. The example uses array updates to add or remove fruit, triggering enter and exit transitions.

SSophia Murage

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 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

Five fruit circles appear as apples in a bowl and animate with zero-to-full scaling using D3 v5 data joins. Clicking a fruit selects it with a black outline, identified through a selectedFruit ID. The fruitBowl function uses scaleOrdinal for colors and radii, with enter, update, and exit selections handling transitions, while a timer script mutates the fruits array to replace a fruit with a lemon and remove others.

MMunTatt Yap

95% match