Bowl of fruit Click to Select

100%

Bowl of fruit Click to Select

✓ Published0🌍 Public

Last edited Jun 21, 2020

Created on Jun 21, 2020

Forked from Bowl of fruit Click to Select

Five circles represent fruit in a bowl, starting as red apples and transitioning to a yellow lemon, with the ability to click any fruit to select it. The visualization uses D3 v5 data joins with `transition` to animate circle radii on entry and exit, while `scaleOrdinal` maps fruit types to colors and sizes.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing fruit appear in a row and animate to their full size. Clicking a circle selects it, drawing a black outline around that fruit. The example uses D3 v5 with data joins and transitions to update the visualization, while `scaleOrdinal` maps fruit types to colors and sizes. Over time, the data changes to remove fruit or change one apple to a lemon.

DDaniel García

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

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

95% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles representing fruit appear in a row, with apples as large red circles and lemons as smaller yellow ones. Clicking a fruit selects it with a black outline. D3 v5 scales, including `scaleOrdinal`, map fruit types to size and color, while the `fruitBowl` function and `transition` animate circle radius changes. The example uses array updates to add or remove fruit, triggering enter and exit transitions.

SSophia Murage

95% match

Loading thumbnail…

Bowl of fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Clicking a circle selects it, marking it with a black stroke. The React app uses d3.scaleOrdinal for colors and radii, while d3's selection, data join, and transition API animate entering, exiting, and updating circles over one-second durations.

NNkwachi Abel

95% match

Loading thumbnail…

Bowl of Fruit - Click to select

Five colored circles represent apples and lemons in a bowl. Clicking a fruit selects it with a black outline. The visualization animates changes, with new fruits growing from a radius of zero and removed fruits shrinking away. Built with D3 v5, the code uses `scaleOrdinal` for color and radius mapping, while SVG circle transitions handle the enter, update, and exit animations.

PPabloReyesBetanzo

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruits render as colored circles in an SVG, with apples and lemons distinguished by size and color. Clicking a circle records its selection and triggers a re-render. The visualization demonstrates data joins and transitions using d3.selectAll, data binding, and transition methods, with fruits added, removed, and type-changed over timed intervals. The d3.scaleOrdinal maps fruit types to radii and colors, while React manages the click handler and state updates.

Ccathykan

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles represent apples in a row, transitioning in size and color as a lemon replaces one apple and fruits are removed. Clicking a fruit toggles its black outline to mark it selected. The example uses d3 v5 selections with data joins, `scaleOrdinal` for color, radius, and stroke, and chained `transition` calls to animate enter, update, and exit states over one-second durations.

CCalvin Gomez

95% match