Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Rendering Data with React

0 stars2🌍 Public
Wwindwaver
Last edited Mar 22, 2021
Created on Mar 22, 2021

This example demonstrates how React can render data as a series of colored horizontal bars, with each bar representing a CSS named color from a dataset loaded via d3.csv from a GitHub gist. The React component uses the useState and useEffect hooks to asynchronously fetch and store the CSV data, then maps over the array to produce a div for each color, setting the hex value from the 'RGB hex value' column as the background and a fixed width and height. The visualization shows all colors stacked vertically, filling the screen without scrolling.

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