Skip to main content
SimilarExport ZIP
100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public
Bbeca8675
Last edited Apr 20, 2020
Created on Apr 20, 2020

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

AI-generated description
MIT Licensed

Similar vizzes

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

Bowl of Fruit - Click to Select

Five apples rendered as red SVG circles sit in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit via React state, using the d3 scaleOrdinal for both color and radius mapping. The example demonstrates how React components and d3 scales can combine to create interactive SVG visualizations annotated with d3.v5.

CChenluWang96
97% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples rendered as red SVG circles sit in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit via React state, using the d3 scaleOrdinal for both color and radius mapping. The example demonstrates how React components and d3 scales can combine to create interactive SVG visualizations annotated with d3.v5.

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

Bowl of Fruit - Click to Select

Five apples rendered as red circles sit in a row within an SVG, and clicking any of them selects it, adding a black outline. The React component uses D3’s `scaleOrdinal` for color and radius mappings, with state managed via `useState` to track the selected fruit. Rendering is direct SVG circle generation, driven by the `FruitBowl` component. The code includes commented-out D3 transitions for potential future animation.

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

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in a row, and clicking one selects it by giving it a black outline. The visualization uses React to manage the `selectedFruit` state, and D3.js `scaleOrdinal` maps fruit type to both color and radius. The current static view shows apples only, but commented-out code indicates planned transitions for removing fruit or changing an apple to a lemon.

Xxychen0612.cs09@nycu.edu.tw
96% match