Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public

Last edited Jan 31, 2020

Created on Jan 31, 2020

Forked from Bowl of Fruit - Click to Select

Interactive circles represent apples and lemons in a bowl. Clicking a fruit selects it, visible via a black stroke. The React component `FruitBowl` uses D3’s `scaleOrdinal` for color and radius, and renders SVG circles positioned by index. State updates through `useState` trigger re-renders, while a separate D3 `data` join animates textual labels on click.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit renders apples and lemons as colored circles (red and yellow) positioned along a horizontal line. Clicking a fruit selects it, highlighting the chosen circle with a black stroke. Built with React and D3.js, the example uses ordinal scales for color and radius mapping, with SVG circles and a click handler that updates state via `setSelectedFruit`.

Ddanhuijia

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

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

95% match

Loading thumbnail…

Bowl of Fruit - Clcik to Select

This interactive example displays a bowl of fruit as colored circles that can be clicked to select. The visualization uses D3’s `scaleOrdinal` to map fruit types to colors and radii, with apples in red and lemons in yellow. State changes—removing fruit or changing an apple to a lemon—are animated over one second using D3 transitions. The React-based code employs `selectAll` to update circles and `merge` for incremental rendering, with SVG strokes indicating the selected fruit.

BbeauMarko

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

94% match

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit demonstrates interactive selection with animated SVG transitions in React. Apples render as red circles and lemons as yellow circles, with click-to-select highlighting the chosen fruit with a black outline. The example uses d3.scaleOrdinal for color and radius mapping, while d3 transitions animate circle radius changes when fruits are added or removed. Data updates occur through timed functions that remove, replace, and filter fruit array elements, showcasing enter, update, and exit selections.

PPeter S

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

94% match