Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React & D3

Public visualization

Viewing a saved revision (read-only)

1846a7d0e3f849c8b9feb95841c4f877

Rendering Data with React & D3

0 stars1🌍 Public
SSarah Elkeurti
Last edited Apr 6, 2022
Created on Apr 3, 2022

This example visualizes CSS named colors as a pie chart, where each slice represents a single color from a CSV dataset of named colors. The code uses D3 utilities `d3.csv` to load the data, `d3.pie` to compute slice angles, and `d3.arc` to generate SVG path shapes. React manages the asynchronous data loading with `useState` and `useEffect`, rendering each path with its corresponding hex color as the fill. The visualization demonstrates how React handles state while D3 handles the geometric computations and SVG output.

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.