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)

1d0cb89701544751bc4e773e9f772cc4

Rendering Data with React & D3

0 stars1🌍 Public
KKhadidja Arezki
Last edited Dec 28, 2022
Created on Dec 28, 2022

This example renders a full-screen pie chart of CSS named color values, loading the data as CSV from a GitHub gist and mapping each row to a colored slice. The React component uses a `useLayoutEffect` hook to fetch the data and `d3.csv` for parsing, while D3’s `pie` and `arc` generators compute the angles and SVG path geometry. Each slice’s fill is set directly from the hex value in the dataset, producing a dense, colorful disk that reveals the distribution of named colors. D3 v7 and React 16 are loaded via CDN, and the visualization is drawn as static SVG.

AI-generated description

Smiley face implementation with React.