React Hooks Bowl of Fruit

100%

React Hooks Bowl of Fruit

✓ Published0🌍 Public

Last edited Sep 4, 2019

Created on Sep 2, 2019

A static bowl of five apples demonstrates React Hooks for state management in a D3-based SVG visualization. The `FruitBowl` component maps fruit data to circles positioned along a row, using `scaleOrdinal` color and radius scales to differentiate apple from lemon. Clicking a fruit updates the `selectedFruit` state, highlighting the chosen circle with a black stroke. The example uses React's `useState` hook, D3's `range` for data generation, and renders purely via SVG, with no animation or transitions active in the final code.

AI-generated description

Trying out React Hooks.

MIT Licensed

Similar vizzes

Loading thumbnail…

React Hooks Bowl of Fruit

A row of apples rendered as SVG circles demonstrates React Hooks state management. The `FruitBowl` component maps fruit data to circles, using D3's `scaleOrdinal` for color and radius scales. React's `useState` tracks the selected fruit, and clicking a circle updates its selection, toggling a black stroke. The example uses D3.v5 for scales and React 16.8's Hooks API within a static fruit array.

GGeolffrey S Mena

97% match

Loading thumbnail…

React Hooks Bowl of Fruit

A React Hooks bowl of fruit renders five apples as circles in an SVG, with a black outline highlighting the currently selected fruit when clicked. The example demonstrates state management via `useState` for both the fruit array and the selected fruit ID, passing them to a functional `FruitBowl` component. Using D3 v5’s `scaleOrdinal` for color and radius mappings, it sets circle properties dynamically, enabling interactive selection through React event handlers.

Vvaporpin

97% match

Loading thumbnail…

React Hooks Bowl of Fruit

A React Hooks component renders a static bowl of five red apples as SVG circles, with clicking one highlighting it via a black stroke. The code uses `useState` to manage the selected fruit ID and passes the selection handler down to the `FruitBowl` component. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `range` generates the initial fruit array. The example demonstrates integrating D3 scales with React’s declarative rendering model, though commented-out code hints at possible transitions that are not active in this version.

MMartin Blatz

97% match

Loading thumbnail…

React Hooks Bowl of Fruit

A static bowl of fruit rendered as SVG circles demonstrates React Hooks and D3.js scale constructors working together. Using `d3.scaleOrdinal` for both fill color and radius, five red apples appear in a row, with the first apple highlighted by a black stroke on click. The `FruitBowl` component receives array data and handles selection state via React's `useState`, while the code includes commented-out transition logic for future interactive animation, indicating a placeholder for D3's `.transition()` API.

Ccodexmon

96% match

Loading thumbnail…

React Hooks Bowl of Fruit

This example demonstrates a data visualization of a fruit bowl using React Hooks and D3.js. It shows a row of apple and lemon circles, where clicking a fruit selects it and highlights it with a black stroke. The code uses React's `useState` hook to manage the fruit data and selected fruit state, while D3's `scaleOrdinal` functions define the color and radius scales for each fruit type. The visualization renders as SVG circles within a React component, though the commented-out code suggests potential animation transitions that are not active.

CCurran Kelleher

95% match

Loading thumbnail…

React Hooks Bowl of Fruit

Five apples rendered as red SVG circles sit in a row, with one selectable via click. React Hooks manage the fruit state and selected fruit ID, while d3 ordinal scales map fruit type to color and radius. The code uses React's `useState` hook, ReactDOM rendering, and d3's `scaleOrdinal` and `range` functions. The data is generated using `Math.random()` for fruit IDs, and clicking a circle triggers a stroke highlight, though no animation is implemented.

HHadi Boukdir

95% match

Loading thumbnail…

React Hooks Bowl of Fruit

Five apples with D3 ordinal color and radius scales render as React circles in an SVG bowl. Clicking a fruit updates its selected state through React Hooks (`useState`) and a callback prop to draw a black stroke. React’s `useEffect` initializes a D3 brush on a separate `<g>` element, logging selection events to the console. The example demonstrates combining React’s declarative component model with D3’s imperative brush API.

Vvaporpin

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

91% match