Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React!!

Public visualization

Viewing a saved revision (read-only)

74f103dda19d4f628066ef1e3a995f1b

Rendering Data with React!!

0 stars0🌍 Public
Mmrthnkwn
Last edited Jan 20, 2022
Created on Jan 20, 2022

This example visualizes the CSS named color palette as a circular donut chart, with each color represented as a slice arranged around a central point. The visualization loads color data from a CSV file using D3’s `csv` utility, then draws the arcs with the `d3.arc` and `d3.pie` functions. React manages the asynchronous data loading through its `useState` and `useEffect` hooks, rendering each slice as an SVG path element with the color’s hex value as its fill. The chart displays 148 colors in a single ring, with loading text shown until the data arrives.

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.