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
SSabin Bhandari
Last edited May 29, 2021
Created on May 29, 2021

A color visualization renders the 148 CSS named colors as horizontal stripes, sorted in the order they appear in a CSV file loaded from a GitHub gist. The example demonstrates React’s component model by mapping each row of data to a `<div>` whose background color is set from the `RGB hex value` field. D3’s `csv` utility fetches and parses the data, while React’s `useState` and `useEffect` hooks manage the asynchronous loading state, showing a “Loading…” message until the data arrives. The result is a simple, full-width gradient-like display of all named colors in SVG-less, div-based rendering.

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