Skip to main content
SimilarExport ZIP
100%

Fork of Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Hhuizrh
Last edited Jan 27, 2023
Created on Jan 27, 2023

Five apples sit in a row on a plain SVG canvas. A single click on any apple selects it, emphasizing it by adding a black stroke around its red circle. The example uses React 16.8 with `useState` to manage the selection data flow. D3 v5 provides ordinal scales for the position, radius, and fill color, though the static composition means no animation occurs in the running code.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

Five apples sit in a row on a plain SVG canvas. A single click on any apple selects it, emphasizing it by adding a black stroke around its red circle. The example uses React 16.8 with `useState` to manage the selection data flow. D3 v5 provides ordinal scales for the position, radius, and fill color, though the static composition means no animation occurs in the running code.

Hhuizrh
100% 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…

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

A row of five red apples rendered as SVG circles sits centered in a wide viewport. Clicking any apple selects it, highlighted by a thick black stroke around its border. Built with React and D3 v5, the example uses `scaleOrdinal` for color and radius, and React `useState` to track the selected fruit’s ID. Each circle’s `onClick` handler updates this state, re-rendering the bowl with the new selection.

CChuborg
94% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row across an SVG canvas, each rendered as a red circle with a radius of 50 pixels. Clicking any apple strokes it with a thick black border to mark it as selected, while the previously selected apple loses its outline. The example uses React state via the `useState` hook to track the selected fruit ID and d3's `scaleOrdinal` for both color and radius mapping. All fruits are generated with `range` and rendered as React components, with the selection interaction handled through the `onClick` event.

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