🌍 Public
Viewing a saved revision (read-only)
9b4ee46ac5a04420a742551b8da14132
Rendering data with react
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 descriptionLoading data with d3