Bowl of fruit - Click to select

100%

Bowl of fruit - Click to select

✓ Published1🌍 Public

Last edited Jul 11, 2020

Created on Jul 11, 2020

Forked from Bowl of fruit - General Update Pattern

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Jjblaskovich

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row as circles, and each circle can be clicked to select it, which adds a black outline. Over time, the fruits change: one is removed, one becomes a yellow lemon with a smaller radius, and another is deleted. The visualization uses a React component with D3 v5’s `scaleOrdinal` for color and radius, and animated transitions via `transition().duration()` to smoothly grow, shrink, and reposition the SVG circles. Data mutations are triggered by timed `setTimeout` calls in the main `index.js`.

GGino Dzin

95% match

Loading thumbnail…

Bowl of Fruit Click to Select

A bowl of fruit displays five apples in a row, and clicking any fruit selects it with a black outline. Over time, the apples disappear one by one, and a middle apple transforms into a lemon, with smooth transitions animating the circle radii and positions. The visualization uses d3 v5 with React, rendering SVG circles via the `fruitBowl` module and scales like `scaleOrdinal` for color and radius. Selection handles click events, while enter, merge, and exit transitions animate changes at a 1000-millisecond duration.

JJake

95% match

Loading thumbnail…

Bowl of fruit Click to Select

A bowl of fruit visualization demonstrates animated selection and data updates. Five circles representing apples and lemons move horizontally, with the selected fruit highlighted by a black stroke. The view uses d3.select and d3.range to generate initial data, with scaleOrdinal mapping fruit types to colors and radii. Fruit removal, type changes, and interactive clicking trigger transitions via d3.transition().duration, animating circle positions and sizes over one-second intervals. The implementation uses React, SVG rendering, and D3 v5.

Jjeelong

95% match

Loading thumbnail…

Bowl of fruits - Click

A bowl of five apples is shown as colored circles, which can be clicked to select a fruit and highlight it with a black outline. Over time, the apples are eaten, replaced with a lemon, and eventually rot, changing their color and radius with animated transitions. Built with D3 v5, the visualization uses `scaleOrdinal` for color and radius mapping, `selection.data` with a key function for updates, and chained `transition` calls to animate enter, update, and exit states.

Nnikeshkv

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, each initially an apple that can be clicked to select it with a black outline. The visualization uses d3 data joins with enter, merge, and exit transitions to animate circles growing, shrinking, and changing color as apples are eaten or replaced with lemons over timed intervals. The fruitBowl function leverages d3.scaleOrdinal for color and radius mapping, while click handlers update the selected fruit state to trigger re-renders.

HHelenaShu

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

A bowl of fruit shows five apples and lemons as colored circles that users can click to highlight with a black stroke. The visualization demonstrates animated enter, update, and exit transitions as fruits are eaten and replaced over time. Built with D3 v5, it uses ordinal scales to map fruit types to fill colors and radii, while selection joins and `transition().duration()` handle the smooth size and position animations.

RReekMajumder

95% match