Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React Hooks Bowl of Fruit

Public visualization

Viewing a saved revision (read-only)

1ec7a15609c14d74a7886ce28b9e55b9

React Hooks Bowl of Fruit

0 stars0🌍 Public
HHadi Boukdir
Last edited Jul 17, 2019
Created on Jul 17, 2019

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.

AI-generated description

Trying out React Hooks.