Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Viewing a saved revision (read-only)

25954432881248169d323a07ce905e44

Rendering Data with React

0 stars0🌍 Public
AAD-W99
Last edited Sep 20, 2022
Created on Sep 20, 2022

This example demonstrates how React and D3 work together to render a dataset as a pie chart. The visualization shows all named CSS colors as equal-sized slices arranged in a ring, with each slice filled using its corresponding hex value from a CSV file. The code uses React’s `useState` and `useEffect` hooks to load the data with D3’s `csv` utility, then maps over the parsed rows to generate SVG `<path>` elements. The pie layout and arc generator (`d3.pie` and `d3.arc`) compute the angles and paths for each slice.

AI-generated description

A program that loads in some data using D3 utilities, and uses React render the data.