Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading Data with React & D3

Public visualization

Viewing a saved revision (read-only)

7211e5c336094d5db9b8b68c20c9a010

Loading Data with React & D3

0 stars1🌍 Public
SSun Hwy (David) Kim
Last edited Apr 4, 2022
Created on Mar 24, 2022
Forked from Mouse Follower

This example visualizes CSS named colors as a pie chart, where each slice represents one color from a dataset loaded via `d3.csv`. The visualization fills the entire browser window, with each slice colored by its corresponding hex value. Built with React and D3 v7, the code uses React’s `useState` and `useEffect` hooks to fetch the CSV asynchronously, displaying a “Loading…” message until the data arrives. The pie geometry is generated using `d3.arc` with an inner radius of zero, and the SVG paths are rendered dynamically based on the loaded data.

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.