Bowl of Fruit Click to Select

100%

Bowl of Fruit Click to Select

✓ Published1🌍 Public

Last edited Jul 5, 2020

Created on Jul 5, 2020

Forked from Bowl of Fruit with Animated Transitions

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

96% match

Loading thumbnail…

Bowl of Fruit Click to Select

Five apples appear in a bowl, rendered as circles using the D3.js v7 library. A click on any fruit selects it, shown with a black stroke, and triggers a transition. Over time, the example programmatically removes apples and changes one apple into a lemon, with `transition().duration(1000)` animating the changes in radius and position using ordinal scales for color and size. The code uses D3 data joins with `enter`, `merge`, and `exit` selections.

Ggabrielribeirob

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

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

95% match

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

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