Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published1🌍 Public

Last edited Jun 26, 2020

Created on Jun 25, 2020

This example shows a bowl of fruit where clicking on an apple or lemon selects it, highlighting the chosen piece with a black outline. The visualization animates changes to the fruit data over time, including removal, type changes, and addition, using transitions on the circles. Built with React and D3 v5, it uses `scaleOrdinal` for color and radius mapping, SVG groups for positioning, and D3’s `selection.merge` pattern for enter-merge-exit updates. The bowl is rendered as a rounded rectangle, with fruit positioned horizontally.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

96% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

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

This example shows an interactive bowl of fruit where circles represent apples and lemons, colored red and yellow via a d3.scaleOrdinal. Clicking a fruit selects it, logging the ID. The visualization uses d3 transitions to animate circles entering with radius 0, growing to size based on fruit type, and exiting by shrinking. Data changes occur over time: a fruit is removed, an apple transforms into a lemon, and another is filtered out, all rendering through a React-based d3 data join with keyed selection on fruit IDs.

Nnsadath

95% match

Loading thumbnail…

Bowl of fruits - click to select

This example shows a bowl of five fruits that can be clicked to select one, with a black stroke highlighting the chosen fruit and a smooth animation transitioning the selected state. The visualization updates as apples are eaten and replaced by lemons over time, demonstrating data joins in D3. Built with React and D3 v5, it uses `scaleOrdinal` for color and radius mapping, `.enter()`, `.merge()`, and `.exit()` for lifecycle handling, and `.transition().duration()` to animate circle attributes. The rendering is SVG-based, with interactive click events triggering selection callbacks.

SSchmittYannic

95% match

Loading thumbnail…

Bowl of fruit - Click to select

This example shows a bowl of fruit where viewers can hover over apples and a lemon to select them, highlighting the chosen fruit with a black stroke while the others remain unhighlighted. The visualization animates changes in the fruit bowl over time, with fruits being removed and an apple transforming into a lemon. Built with D3 v5, it uses an SVG rendering approach with scales like `scaleOrdinal` for color, radius, text, and font size, alongside `transition().duration()` to smoothly animate position, radius, and text size changes for enter, update, and exit selections.

AAnthony-coding

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

95% match