Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
NNitin Vadhiya
Last edited Oct 30, 2021
Created on Oct 30, 2021

Five apples sit in a row on a light background. Clicking any fruit selects it, highlighting it with a black outline while the others remain unselected. Built with React and D3 v5, the visualization maps fruit type to ordinal color and radius scales, rendering each as an SVG circle. The app uses React’s `useState` hook to track the selected fruit’s ID and passes click handlers down to the `FruitBowl` component. Initial data is generated with `d3.range` and random IDs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are arranged in a row as SVG circles, with the currently selected fruit highlighted by a black outline. Clicking an apple triggers a callback that updates the selection state. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius mapping, with `useState` managing the selected fruit’s ID.

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

Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red circles of uniform size, with one highlighted by a black outline as the currently selected fruit. Clicking any apple moves the selection stroke to that fruit, updating the React component’s state via a `useState` hook. The visualization uses React with D3’s `scaleOrdinal` for color and radius mapping, and renders each fruit as an SVG `circle` element with a custom `onClick` handler.

AAndrew Yan
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
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples render in an SVG, and clicking one selects it with a green stroke. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius, mapping fruit types to visual properties. The `FruitBowl` component handles click events via React state, updating the selected fruit’s ID to trigger a re-render.

Ttharanitaran
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

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