Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public

Last edited May 19, 2020

Created on May 18, 2020

Forked from Bowl of Fruit - General Update Pattern

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit rendered as SVG circles lets users click individual apples or lemons to select them, highlighting the chosen fruit with a black stroke. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color and radius mappings based on fruit type, while React state manages the selected fruit's ID. Each circle responds to click events, updating the selection and re-rendering the components with animated transitions.

AAlice Hsieh

96% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, rendered as SVG elements in React with D3 v5. Clicking a fruit highlights it with a gray outline while its color and radius animate through `transition().duration(1000)`, mapping apple and lemon types via `scaleOrdinal` color and radius scales. The data join uses a key function for object constancy, and exit transitions shrink circles to radius 0 before removal as fruits are eaten or replaced over time.

Vvic126

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

This interactive visualization presents a bowl of fruit as five SVG circles, each colored red for apples or yellow for lemons using D3's scaleOrdinal color scheme. Clicking any circle selects it, applying a black outline via a stroke property based on the current selection state. The React-based implementation uses D3's radiusScale to vary circle sizes and manages selection through React's useState hook, with the index.js file generating random fruit types and the FruitBowl component rendering the clickable SVG elements.

RRubens

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles render in an SVG, with apples in red and lemons in yellow. Clicking any fruit selects it, applying a black stroke. The visualization uses D3 v5 data joins with enter, update, and exit transitions to animate apples being eaten, a lemon replacing an apple, and the removal of a selected apple. The `fruitBowl` module leverages `scaleOrdinal` for color and radius mapping, and `.on('click')` handlers trigger re-renders with updated fruit data.

JJonathan Phelps

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

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