Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading Data with React & D3

Public visualization

Loading Data with React & D3

0 stars1🌍 Public
JJenna Hamza
Last edited Jan 3, 2023
Created on Dec 29, 2022
Forked from Circle Follower

A radial burst of colored arcs represents all CSS named colors, with each slice filled by its corresponding RGB hex value and sized equally to form a full circle. The example demonstrates asynchronous data loading in React: a `useEffect` hook triggers d3.csv to fetch the dataset from a GitHub gist, storing the parsed rows in component state. Once loaded, d3.pie and d3.arc compute the slice geometry, while React renders each SVG path. Before data arrives, a loading message displays the row count, column count, and file size in kilobytes using d3.csvFormat.

AI-generated description

Loads in data [data about CSS named colors] (https://gist.githubusercontent.com/jhamza91/65b9f2c695f1e802e483143f5eb1b73c/raw/cssNamedColors.csv) using d3 uses React to keep track of state of data as a radial burst.

Comments

Sign in to join the discussion.

MIT Licensed