Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering data with React

Public visualization

Viewing a saved revision (read-only)

04279f0d96b84cb5bf23c8d37925ba28

Rendering data with React

0 stars1🌍 Public
Aashokganpathi
Last edited May 30, 2021
Created on May 30, 2021

This example demonstrates how React can render a dataset of CSS named colors by mapping each row to a colored horizontal strip, creating a stacked visual catalog of 148 color swatches. The application loads the color data using D3’s `d3.csv` method in a `useEffect` hook, stores it in React state via `useState`, and conditionally displays a “Loading…” message until the data arrives. Each color is rendered as a `<div>` element with its background set to the RGB hex value from the CSV. The code combines React 17, D3 v6, and SVG-friendly styling within a single-page setup.

AI-generated description

Load data about CSS colors into React component using D3. use React to render data.