Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Viewing a saved revision (read-only)

fa3291dfdab64675a67d599e09ebebeb

Rendering Data with React

0 stars2🌍 Public
NNick Jefford-Horn
Last edited Sep 19, 2021
Created on Jun 7, 2021
Forked from Hello VizHub

A React application displays CSS named colors as a vertical stack of horizontal bars, one per color, with each bar’s fill matching its hex value. The program fetches a CSV file of named colors using D3’s `csv` utility, then maps each row to a `<div>` element whose background color is set inline from the ‘RGB hex value’ field. The visualization relies on React’s `useEffect` hook to load the data asynchronously and `useState` to hold the parsed result, showing a large “Loading…” message until the data arrives.

AI-generated description

A program that loads in some data about CSS named colours using D3 utilities and uses React render the data.