Click to Select - Bowl of Fruit

100%

Click to Select - Bowl of Fruit

✓ Published2🌍 Public

Last edited Mar 15, 2021

Created on Mar 10, 2021

Forked from d3-face

Eight circles representing apples are rendered as a bowl of fruit on a black background. Clicking a fruit selects it, highlighting that item with a white stroke. The visualization animates changes to the fruit list, with fruits being removed and their types changing from apples to lemons over time. Built with D3 v5, the example uses the `select`, `range`, and `scaleOrdinal` APIs to manage SVG rendering, size and color scales, and transitions between states.

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

Ccornshoots

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

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

A bowl of fruit visualization displays five apples as colored circles, which can be clicked to select. The selection enlarges the chosen fruit, and over time apples are removed or replaced with lemons, with animations transitioning circle radii. The example uses d3 v5 with the `scaleOrdinal` color and radius scales, and shows enter, merge, and exit transitions via `transition().duration()`. The SVG rendering is updated through a `fruitBowl` function that handles click events and data changes.

MMaciek Sitkowski

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

94% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit displays colored circles representing apples and lemons, with an animated sequence of removals and a type change. Clicking a fruit selects it by adding a black stroke. The visualization uses d3.scaleOrdinal for color and radius mappings, builds groups with circles and text labels, and updates incrementally via setTimeout. The SVG rendering is generated through d3.select and d3.range, with event handling via `.on('click')`.

Ppkcesar

94% match

Loading thumbnail…

Bowl of fruit - Click to select

This example demonstrates an animated, interactive SVG fruit bowl where apples and lemons are represented as colored circles. Users can click a fruit to select it, which adds a black stroke around it. The visualization shows state changes through time, including fruit removal, type changes, and filtering. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, and D3's selection API with `enter`, `merge`, and `exit` to animate circles and labels smoothly when the underlying data array is modified.

IIgor Borzunov

94% match

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

94% match