Bowl of Fruit - Click to Select

100%

Bowl of Fruit - Click to Select

✓ Published0🌍 Public

Last edited Jan 26, 2020

Created on Jan 26, 2020

Forked from Bowl of Fruit - Click to Select

A circle for each fruit is drawn in an SVG, colored by type using a d3.scaleOrdinal color scale and sized by a d3.scaleOrdinal radius scale. Clicking a fruit selects it, triggering a black stroke on that circle via React state (`useState`) and a callback. The visualization uses React with the d3.v5 library for scaling; while commented-out code hints at planned transitions, the active implementation shows no animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Click to Select

This interactive visualization presents a bowl of fruit as five SVG circles, each colored red for apples or yellow for lemons using D3's scaleOrdinal color scheme. Clicking any circle selects it, applying a black outline via a stroke property based on the current selection state. The React-based implementation uses D3's radiusScale to vary circle sizes and manages selection through React's useState hook, with the index.js file generating random fruit types and the FruitBowl component rendering the clickable SVG elements.

RRubens

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit rendered as SVG circles lets users click individual apples or lemons to select them, highlighting the chosen fruit with a black stroke. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color and radius mappings based on fruit type, while React state manages the selected fruit's ID. Each circle responds to click events, updating the selection and re-rendering the components with animated transitions.

AAlice Hsieh

95% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruits render as colored circles in an SVG, with apples and lemons distinguished by size and color. Clicking a circle records its selection and triggers a re-render. The visualization demonstrates data joins and transitions using d3.selectAll, data binding, and transition methods, with fruits added, removed, and type-changed over timed intervals. The d3.scaleOrdinal maps fruit types to radii and colors, while React manages the click handler and state updates.

Ccathykan

95% match

Loading thumbnail…

Bowl of Fruit Click to Select

This example shows a bowl of fruit rendered as SVG circles, where clicking a fruit selects it with a black outline. The visualization uses React with D3 v5, employing `scaleOrdinal` for color and size mapping. D3’s data join and transitions animate fruit removal and type changes, with `transition().duration(1000)` updating circle positions and radii. Fruits are apples and lemons, and the code uses `selection.enter()`, `merge()`, and `exit()` to manage updates.

Ddacoylo

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

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

94% match

Loading thumbnail…

Bowl of Fruit - Click to Select

Interactive circles represent apples and lemons in a bowl. Clicking a fruit selects it, visible via a black stroke. The React component `FruitBowl` uses D3’s `scaleOrdinal` for color and radius, and renders SVG circles positioned by index. State updates through `useState` trigger re-renders, while a separate D3 `data` join animates textual labels on click.

Pp-tang

94% match

Loading thumbnail…

Bowl of Fruit - Click to Select

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.

Ssteveaigbe

94% match