Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Rendering Data with React

0 stars1🌍 Public
RRandyElkins
Last edited Aug 13, 2021
Created on Aug 13, 2021

This example demonstrates rendering a dataset of CSS named colors as a series of horizontal stacked bars, each colored by its corresponding RGB hex value. The visualization uses React to map each data row to a div element, with the background color set directly from the CSV field. D3’s `csv` function loads the color data asynchronously from a GitHub gist URL, while React’s `useState` and `useEffect` hooks manage the loading state. Once fetched, the app renders a full-width strip of colored segments, with a loading message displayed until the data arrives.

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