Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Viewing a saved revision (read-only)

a5d37883f8274099b60b0414cc411374

Rendering Data with React

0 stars1🌍 Public
CChristian Potdevin
Last edited Mar 26, 2021
Created on Mar 26, 2021

This example uses React and D3 to render a circular pie chart of CSS named colors loaded from a CSV file. The visualization displays each color as a slice arranged around a central point, with the fill color derived from the `RGB hex value` column in the data. The code uses React state via `useState` and `useEffect` to fetch the CSV with `d3.csv` and update the UI, while `d3.pie` and `d3.arc` generate the SVG path geometry. A loading message appears until the data is fully fetched and parsed.

AI-generated description

A program that loads in some data using D3 utilities, and uses React state to keep track of the data.