Fork of Bowl of Fruit - Click to Select

100%

Fork of Bowl of Fruit - Click to Select

✓ Published0🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

Forked from Bowl of Fruit - Click to Select

Five apples sit in a row, with the currently selected fruit outlined in black. Clicking any apple updates the selection instantly, changing which circle receives the thick stroke. This React visualization uses a `FruitBowl` component that renders SVG circles, with D3's `scaleOrdinal` mapping fruit types to fill colors and radii. Selection state is managed through React's `useState` hook, passed down as `selectedFruit` and `setSelectedFruit` callbacks, while the data itself is generated with D3's `range` and random IDs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples are drawn in a row as red circles with a black stroke on the selected one. Clicking any apple shifts the selection stroke to that fruit. The visualization uses React with hooks (`useState`) to manage selection state and D3 v5 scales (`scaleOrdinal`) for color and radius, rendering SVG circles via a `FruitBowl` component.

Aannadehtiarova

96% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples rendered as red circles sit in a row, with a black stroke highlighting whichever fruit is currently selected. Clicking a fruit moves the selection to that fruit. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mappings, and manages selection state through React's `useState` hook, passing an `onClick` handler to each SVG circle.

IIsigned

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row, each drawn as a circle. Clicking one apple selects it, highlighting it with a thick black stroke. The selection state is managed by React's `useState` hook, while D3's `scaleOrdinal` maps fruit types to fill colors and radii. The `FruitBowl` component renders SVG circles with event handlers that update the selected fruit.

Ss-janibekova

95% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples are rendered in a row as SVG circles, with a black outline indicating the currently selected fruit. Clicking any apple updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius mappings and React’s `useState` to manage the selected fruit’s ID. The code includes commented-out D3 transitions for potential animated repositioning, though the active version only handles static rendering and click handling.

Llrakla

95% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

A circular SVG chart displays five apples as red circles with black outlines, allowing a viewer to click any apple to select it, which highlights the chosen fruit with a thicker stroke. D3's `scaleOrdinal` maps fruit types to fill colors and radii, while React's `useState` manages both the fruit collection and the selected identifier. The visualization is built with React components rendering SVG circles, using D3 v5 for scales and React 16.8 for stateful interaction logic.

Ggharakhani1986

95% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red circles inside an SVG. Clicking any apple selects it, drawing a black stroke around it. Built with React and D3 v5, the visualization uses D3's `scaleOrdinal` to map fruit types to colors and radii, with React state controlling the selected fruit ID.

SSihua Lee

95% match

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples rendered as red circles sit in a row, with one highlighted by a black stroke when selected. Clicking any circle updates the selected fruit, which is tracked via React’s `useState` hook. The visualization uses React and D3’s `scaleOrdinal` to map fruit types to colors and radii, with SVG circles for rendering. D3 v5 and React 16.8 are loaded from CDNs, and styled by a simple CSS reset.

NNYCUBK201

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row inside an SVG bowl, each colored red and sized identically. Clicking an apple highlights it with a black outline, updating the selected state via React’s `useState` hook. The `FruitBowl` component uses D3’s `scaleOrdinal` to map fruit types to fill colors and radii, while `onClick` handlers call `setSelectedFruit` to change the selection. The visualization demonstrates React state management combined with D3 scales for static, interactive SVG rendering.

Bbobshen30

95% match