Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Loading Data with React & D3

Public visualization

Viewing a saved revision (read-only)

d146ecfabbf24f07acaecbdc15e5181f

Fork of Loading Data with React & D3

0 stars1🌍 Public
HHamza Abdirashid
Last edited Jul 6, 2021
Created on Jul 6, 2021

This example displays a grid of small colored boxes representing CSS named colors, loaded from a remote CSV file via D3's `csv` utility. After fetching the data asynchronously, React's `useState` and `useEffect` hooks trigger the load and render a loading message until the dataset arrives. The `createBox` mapping function uses each row’s `'RGB hex value'` field to set the inline `backgroundColor` style of a `div`, producing a visual swatch for every color, laid out with CSS `display: grid` and `flexFlow: 'row wrap'`. The code integrates React with D3 v5 and invokes `ReactDOM.render` on the `#root` element.

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.