Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering data with react and d3 (CSS colors)

Public visualization

Viewing a saved revision (read-only)

610580eafeb84460a5ac7c39f5b73c1b

Rendering data with react and d3 (CSS colors)

0 stars1🌍 Public
AAlexander Dorling
Last edited May 12, 2021
Created on May 12, 2021

A React application that visualizes CSS named colors as a stacked sequence of horizontal stripes. The example loads color data from a CSV file using D3's `csv` function, then maps each color record to a `<div>` element styled with its corresponding `RGB hex value` as the background color. Each stripe has a fixed width and height, and the page initially displays "Loading..." until the asynchronous data fetch completes. The code combines React hooks (`useState`, `useEffect`) for state management with D3 for data acquisition, rendering the final result as a vertical color spectrum.

AI-generated description

A program that loads basic data about css named colours using D3 utilities, uses React to render data.