Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit-Click to Select

✓ Published1🌍 Public
Mmeihaoming
Last edited Nov 23, 2019
Created on Nov 23, 2019

This example demonstrates a dynamic fruit bowl visualization where users can click on apples or lemons to select them, highlighting the chosen fruit with a black outline. The bowl renders as a rounded rectangle with fruit circles labeled by type, using D3.js scaleOrdinal for consistent color and radius mapping. The scene animates over time as fruits are removed, replaced, or modified through setTimeout calls. Built with d3.v5, it employs SVG rendering and transition animations, with DOM manipulation handled through d3.select and d3.range methods.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click To Select

A circular fruit bowl displays apples and lemons that users can click to select, with the chosen fruit highlighted by a thick black stroke. The visualization uses D3.js ordinal scales for color and radius mapping, and animated transitions smoothly resize circles on entry or exit when fruits are removed or replaced. The example animates data changes over time, showing apples being eaten and one apple transforming into a lemon, while maintaining click-based selection throughout the updates.

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

Bowl of fruit click to select

This example shows a bowl of fruit that changes over time, with circles representing apples and lemons that users can click to select, highlighting the chosen fruit with a black outline. The visualization demonstrates animated transitions as fruits are removed, transformed, and repositioned using d3 transitions over one second. Built with React and d3.v5, the code uses `scaleOrdinal` for color and radius mapping, while selection and data binding manage the dynamic updates. The SVG rendering includes click handlers that trigger re-renders, and the fruit bowl shrinks and morphs as fruits disappear from the array.

KKurt J Nilsen
95% match
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

This example demonstrates a dynamic bowl of fruit where clicking an apple or lemon selects it, highlighted by a thicker black stroke. Five apples render initially, then change over time: one is eaten, a second becomes a lemon, and another disappears. The visualization uses React with D3 v6, employing `scaleOrdinal` for color and radius, SVG transitions for smooth movement, and click handlers to update the selected fruit state.

MMatthew Rubino
95% match
Loading thumbnail…

Bowl of Fruit-Click to Select.js

An interactive fruit bowl displays apples and lemons as colored circles, with a single click selecting a fruit and highlighting it with a black stroke. The visualization uses d3-scale's `scaleOrdinal` to map fruit types to colors and radii, while d3-transition animates circle entry, exit, and position changes over one second. d3-selection handles data joins and click events, and the code demonstrates dynamic updates through timed mutations that remove fruits or change an apple to a lemon.

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

Bowl of fruits - click to select

A bowl of fruits demonstrates interactive data selection and dynamic updates in D3. Apples and lemons are rendered as colored circles with labels, and clicking a fruit selects it, highlighting it with a black stroke. The visualization uses D3's data joins with enter, update, and exit selections to animate fruits appearing, disappearing, and changing type over time via transitions. It employs ordinal scales for color and radius, SVG groups for fruit elements, and click event handlers to update the selected state.

Aarieltonglet
95% match