Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to select

✓ Published1🌍 Public
Ccornshoots
Last edited Mar 15, 2021
Created on Mar 15, 2021

A dynamic bowl of fruit shows five circles—apples and lemons—that rearrange and resize over time as items are removed or change type. Clicking any fruit selects it, highlighting the chosen circle with a black stroke. The visualization uses D3 v5’s `select`, `range`, `scaleOrdinal`, and transitions to animate circle positions and radii, with an SVG render and JavaScript timers driving the scripted state changes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic fruit bowl displays five circles representing apples and lemons, with each fruit scaled by type and color-coded via a categorical scale. Clicking a fruit selects it and adds a black stroke. The visualization uses D3’s selection API to incrementally update the SVG, animating radius and position changes over one-second transitions as fruits are eaten or replaced, demonstrating stateful, event-driven interactions.

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

Bowl of Fruit - Click to select

A bowl of fruit displays five circles representing apples and lemons, each clickable to select and highlight with a black stroke. The visualization uses D3 v6 with SVG rendering and animation, employing `scaleOrdinal` for color and radius mapping based on fruit type. State changes include eating an apple and replacing one with a lemon, triggering enter, update, and exit transitions that animate radius from zero to full size over one second.

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

Bowl of Fruit - Click to Select #2

The visualization displays five fruit circles in a bowl; clicking one selects it, shown with a black border. Animated transitions shrink, remove, or alter fruit types (apple to lemon) over time. Built with D3 v5, it uses `scaleOrdinal` for color and radius, the `select`/`merge`/`transition` API for smooth SVG updates, and mouse click handlers to manage selected state.

Zzlastefcia
95% match
Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich
95% match