Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React & D3

Public visualization

Rendering Data with React & D3

0 stars1🌍 Public
LLaura Johnson
Last edited Mar 25, 2021
Created on Mar 12, 2021
Forked from Mouse Follower

This example shows CSS named colors as a single circular pie chart, with each color’s name as a tooltip on its corresponding arc. React (via `useState`, `useEffect`, and `ReactDOM.render`) manages the loading state and SVG rendering, while D3’s `csv`, `pie`, and `arc` utilities fetch the dataset and compute the arc paths. A `<clipPath>` with a circle clips the chart into a ring shape, and the code uses `d.data['RGB hex value']` for fills and `d.data['Keyword']` for IDs and titles.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render it.

Comments

Sign in to join the discussion.

MIT Licensed