Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit -Click to Select

✓ Published1🌍 Public
MMunTatt Yap
Last edited Aug 8, 2019
Created on Aug 7, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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 circles representing fruit animate into a bowl. Clicking a fruit selects it, giving it a black outline, and a sequence of timed updates replaces an apple with a lemon, removes fruits, and pops one. Built with D3 v5, it uses `selection.transition().duration()` for SVG circle animations, `scaleOrdinal` to map the types 'apple' and 'lemon' to colors and radii, and a click handler to update the `selectedFruit` state, all driven by a render function.

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

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel
95% match
Loading thumbnail…

Bowl of Fruit -Click to select

A bowl of fruit shows five apples and a lemon as colored circles that can be clicked to select, highlighting the chosen fruit with a black stroke. The visualization animates fruit removal and type changes over time using D3 v5’s data join and transitions. The `fruitBowl` function uses `scaleOrdinal` for color and radius, with `selectAll`, `enter`, `merge`, and `exit` to manage circle elements, while `transition().duration(1000)` animates attribute changes on an SVG canvas.

Pprincit
95% match