Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data w/ React

Public visualization

Viewing a saved revision (read-only)

5c2a3802e47a4a2c8503736632da4d6b

Rendering Data w/ React

0 stars1🌍 Public
PpyDimi
Last edited Mar 3, 2021
Created on Mar 3, 2021

A React application renders a horizontal strip of CSS Named Colors from a CSV dataset, with each color displayed as a thin 4-pixel-high div whose background matches its hex value. The code uses `useState` to hold the data, `useEffect` with `d3.csv` to load the remote file, and `ReactDOM.render` to mount the component. While the data loads, a large "Loading..." message appears; once fetched, the map over the array produces the full color band.

AI-generated description

A program that loads in some data about CSS Named Colors using D3 Utilities, and uses React state to keep track of the data