Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React - Pie Chart

Public visualization

Viewing a saved revision (read-only)

7036a09faeca4bf49ad2f00c10ff9871

Rendering Data with React - Pie Chart

0 stars0🌍 Public
Rroc286
Last edited Feb 28, 2022
Created on Feb 28, 2022

This example shows a pie chart of CSS named colors, with each color rendered as a slice of equal size. The chart loads data from a CSV file using D3's `csv` utility, then passes it to React, which creates SVG `<path>` elements for each slice. The `pie` and `arc` functions from D3 compute the path data, while React's `useState` and `useEffect` manage the asynchronous data loading. The visualization uses a yellow background circle with a black stroke, and the final SVG is rendered into the page via `ReactDOM.render`.

AI-generated description

A program that loads in some data about CSS Named Colors using D3 utilities, and use React to render the data.