Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published40🌍 Public

Last edited May 21, 2019

Created on Sep 17, 2018

Five apples are arranged in a row as circles, with a black outline highlighting the currently selected fruit. Clicking any apple shifts that selection, demonstrating React state management and SVG event handling. The code uses React hooks (`useState`) and D3 scales (`scaleOrdinal`) to map fruit types to colors and radii, rendering interactive circles within an SVG canvas. A commented-out D3 transition block hints at future animation support.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

96% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five red apples sit in a row, each represented as a colored circle whose radius and fill come from d3 ordinal scales. Clicking a fruit highlights it with a black outline, updating a selected state managed through React’s useState. The visualization renders as SVG, and the code includes commented-out d3 transitions that would animate position or removal over 1000 milliseconds, though these are not active.

MMalcolm Mason Rodriguez

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

96% match