100%

Bowl of Fruit, Interaction on Click

✓ Published2🌍 Public

Last edited Dec 2, 2018

Created on Dec 1, 2018

A bowl of five apples animates as the dataset changes over time: one apple is eaten, another transforms into a lemon, and a third disappears. The visualization demonstrates a data-join update pattern using D3 v5 within a React-style component. The `fruitBowl` function handles enter, update, and exit selections, transitioning circles' radii and fill colors via SVG attributes. Interactions are triggered by `setTimeout` calls, and the rendering uses `d3.selection` and `scaleOrdinal` for color and radius mappings.

AI-generated description

General Update Pattern

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - click to select

A bowl of five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

1123fischer

93% match

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples animate into a horizontal row, with clicking one highlighting it with a black stroke. Over time, an apple is removed, another changes into a lemon, and a second apple is deleted, demonstrating enter, update, and exit transitions. Built with React and D3 v5, the visualization uses `d3.scaleOrdinal` for color and radius mappings, while `selection.merge` and chained `transition` calls animate circle attributes based on bound fruit data.

BB Sundaresan

93% match

Loading thumbnail…

Bowl -Interaction

A bowl of fruit shows five apples that users can click to select, with the selected fruit highlighted. Over time, the simulation removes apples, replaces one with a lemon, and filters out another, demonstrating dynamic updates to a data array. Built with D3 v5 and rendered as SVG, the code uses `select`, `range`, and a custom `fruitBowl` module to manage the visualization, with `setTimeout` driving the state changes.

Ss-janibekova

93% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five apples sit in a bowl, each clickable to toggle a black selection outline. Over time, the dataset changes as fruits are removed and one apple transforms into a lemon, with all updates animated via D3 v5 transitions. The visualization uses d3.scaleOrdinal for color and radius, binds data through selection joins, and applies 1-second transition tweens to reposition groups and resize circles. Click events are handled with D3's event naming system, and SVG shapes render the bowl and fruit.

RRohit Reddy Gottam

93% match

Loading thumbnail…

Bowl of fruit-3(click to select)

A bowl of fruit shows five apples that shrink, disappear, change type, and get removed over timed intervals as the dataset updates. The visualization animates circles representing fruit, with apples in red and lemons in yellow, using D3 v5’s data join, enter/exit transitions, and `transition().duration()` to smoothly resize elements. `scaleOrdinal` maps fruit types to colors and radii, while `selectAll('circle')` and `.merge()` handle updates. The demo runs automatically via `setTimeout`, highlighting dynamic data binding without user interaction.

Kkaviya-ds

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

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

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

92% match