Bowl of fruit - Click to select

100%

Bowl of fruit - Click to select

✓ Published0🌍 Public

Last edited Nov 27, 2019

Created on Nov 27, 2019

Forked from Bowl of fruit - General update pattern

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Bowl of Fruit - Interaction(Hover to Select)

This example demonstrates an interactive bowl of fruit where users can hover over apples and a lemon to select them, highlighting the chosen fruit with a black outline. The visualization shows how data updates and animations work together as fruits are removed or change type over time. Each fruit is rendered as a circle using D3’s SVG API, with size and color determined by ordinal scales. The implementation leverages `scaleOrdinal` for color and radius, and uses `transition().duration(1000)` to animate the circles growing and shrinking as they enter, exit, or update.

MMinwoo Pak

95% match

Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit displays five apples that hover to select, with a black stroke highlighting the currently hovered fruit and disappearing on mouseout. The visualization shows fruit entering, exiting, and changing type through animated transitions over time. Using D3 v5 with an SVG rendering approach, the code employs `scaleOrdinal` for color and radius mappings, `selection.enter`, `merge`, and `exit` patterns, and `transition().duration()` to animate circle attributes. Apples are replaced by a lemon mid-animation, and fruits are removed at intervals, demonstrating dynamic data joins.

Wwwwwj

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

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.

AAnShed

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

A bowl of fruit displays five apples that animate in with a smooth scaling transition. Hovering over any fruit highlights it with a black outline, while a timeout sequence removes apples and changes one into a lemon. The example uses D3 v5 with `scaleOrdinal` for color and radius, and demonstrates data joins with `selection.data` and `transition.attr` for enter, update, and exit animations in SVG.

FFernando Gonzalez - Valadez

95% match

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

95% match

Loading thumbnail…

Bowl of Fruit-Click to Select

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.

Mmeihaoming

95% match