Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Visualising the Data I

Public visualization

Viewing a saved revision (read-only)

1d0af1a14ae64a9d866da4fabe1457de

Visualising the Data I

0 stars1🌍 Public
CChris Briggs
Last edited Nov 15, 2021
Created on Nov 15, 2021

This example visualizes the 148 named CSS colors from the MDN color reference as a vertical strip of colored horizontal bars. Each bar’s background color is set directly from a row in the CSV data loaded via `d3.csv`. The visualization uses React components with hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading and render the bars dynamically. The page initially displays “Loading…” until the data arrives, and each bar is 960 pixels wide by 4 pixels tall, creating a compact color spectrum.

AI-generated description

A program that loads in some data using D3 utilities, and uses React state to render the data. Data source: MDN Named Colors