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
Ccaineosborne
Last edited Jan 13, 2022
Created on Jan 13, 2022

This visualization renders CSS named colors as a series of stacked horizontal bars, creating a swatch-like display. Using React's `useState` and `useEffect` hooks, it asynchronously loads a CSV file of color data from a GitHub gist via `d3.csv`. The app displays a "Loading..." message until the data arrives, then maps each row to a div element whose background color is set by the `RGB hex value` field, with a fixed width and height. The example demonstrates integrating D3's data-fetching utilities with React's component-based rendering and state management.

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.

Comments

Sign in to join the discussion.

MIT Licensed