Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering data with react

Public visualization

Viewing a saved revision (read-only)

9b4ee46ac5a04420a742551b8da14132

Rendering data with react

0 stars1🌍 Public
EElliot Hill
Last edited Jul 8, 2021
Created on Jul 8, 2021

This example demonstrates how React can render data loaded with D3, displaying CSS named colors as horizontal stripes. The visualization maps each row from a CSV file containing color names and RGB hex values into a colored div element, with each stripe’s background color set to the corresponding hex value. The App component uses React’s useState and useEffect hooks to asynchronously fetch the CSV via d3.csv, showing a loading message until the data arrives. The resulting 960-pixel-wide bars stack vertically, creating a simple color spectrum across the viewport.

AI-generated description

Loading data with d3