Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Cody Rendering Data with React & D3

Public visualization

Viewing a saved revision (read-only)

0e39278b3fa74985b7b1f0b6b855a2af

Cody Rendering Data with React & D3

0 stars0🌍 Public
MMark Cody
Last edited Aug 11, 2021
Created on Aug 11, 2021

A radial burst visualization displays all CSS named colors as wedges of a circle, loaded from a CSV of color names and hex values. The React component fetches the data with `d3.csv`, then uses `d3.pie` to compute arc angles and `d3.arc` to generate SVG path shapes, with each wedge filled by its corresponding hex value. Rendering is handled entirely by React, which maps the pie data to `<path>` elements inside an SVG, demonstrating a clean separation between D3’s data and math utilities and React’s declarative UI.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!