Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Ssteveaigbe
Last edited Nov 21, 2020
Created on Nov 21, 2020

A clickable bowl of fruit demonstrates selection state in an SVG rendered with React. Five red apples sit in a row, and clicking one highlights it with a black stroke. The `FruitBowl` component maps fruit data to circles, using `d3.scaleOrdinal` for color and radius scales. React hooks (`useState`) manage the selected fruit's ID, which sets the stroke on the active circle.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
96% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit. The example uses React state with `useState` to track the selected fruit’s ID, and `d3.scaleOrdinal` maps fruit types to colors and radii. Each circle’s `onClick` handler updates the selection, while an SVG renders the circles as React components. The code also comments on transitioning circles with D3 transitions, but active animation is not implemented.

AAmit Kumar
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row as SVG circles, colored red and sized by a D3 ordinal scale. Clicking any fruit selects it, highlighting it with a black stroke via React state. The D3 v5 scales map fruit types to colors and radii, while React components handle rendering and interactivity.

Nnikeshkv
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row as circles, each colored by a `d3.scaleOrdinal` color scale. Clicking an apple selects it, applying a black stroke to highlight the choice, managed by React's `useState`. The `FruitBowl` component renders SVG circles, positioned by index and scaled by fruit type, using D3 v5 with React.

Ccodexmon
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit shows four red apples arranged in a row, each rendered as a circle with D3’s `scaleOrdinal` for color and radius. Clicking an apple selects it, adding a black stroke via React state `setSelectedFruit`. The example uses React components to render SVG circles, with D3 v5 scales for styling and fruit positioning calculated from array indices.

AAmit Kumar
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red SVG circles with a single black outline around the currently selected fruit. Clicking any apple updates the selection state in React, changing the stroke to highlight the chosen item. The visualization uses React with the D3.js v5 `scaleOrdinal` for color and radius mapping, while `useState` manages the interactive selection state.

Ssiddharth171
95% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl. A black outline highlights the currently selected fruit, which changes when a user clicks a circle. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius mappings and handles the click interaction through React state, `setSelectedFruit`.

Bbeca8675
95% match