Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Ep. 20 - Rendering Data with React

Public visualization

Ep. 20 - Rendering Data with React

0 stars1🌍 Public
YYee Han
Last edited Dec 23, 2020
Created on Dec 23, 2020

This example loads a dataset of CSS named colors from a GitHub Gist and renders each color as a horizontal stripe. A React app fetches the CSV data using the `d3.csv` utility, then maps over the rows to create a series of `div` elements, each with a background color from the `d3['RGB hex value']` field. The visualization shows the full spectrum of CSS color names, stacked to form a tall color swatch, with a simple loading state displayed before the data arrives. React state and hooks (`useState`, `useEffect`) manage the asynchronous data fetch and rendering.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed