Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering data with React

Public visualization

Rendering data with React

0 stars0🌍 Public
KKwame Porter Robinson
Last edited Dec 15, 2022
Created on Dec 15, 2022

This example displays a pie chart of CSS named colors loaded from a CSV file, with each slice filled according to its corresponding hex value. D3’s `csv` and `pie` utilities parse the data and compute arc angles, while `d3.arc` generates the SVG path geometries. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, and React maps the pie slices to SVG `<path>` elements. The visualization uses an SVG rendering approach with a fixed width and height.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed