Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React & D3

Public visualization

Viewing a saved revision (read-only)

a03fc860ff3540c9ae1a8af814a276ba

Rendering Data with React & D3

0 stars0🌍 Public
Eekmankaur
Last edited Oct 6, 2022
Created on Oct 6, 2022

This example renders a pie chart of CSS named colors using React and D3 v5. It loads color data from a CSV file via `d3.csv`, then uses a `pie` generator and an `arc` generator to compute the pie slices. Each slice is rendered as an SVG `<path>` element filled with its corresponding RGB hex value from the dataset. The React component manages the asynchronous data loading with `useEffect` and displays a loading state until data arrives. The visualization showcases the full spectrum of CSS color names in a circular layout.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data data.