Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React

Public visualization

Viewing a saved revision (read-only)

5b3e524afd25407a8525102554abf91a

Rendering Data with React

0 stars0🌍 Public
GGang Chen
Last edited Oct 25, 2021
Created on Oct 24, 2021

A React application renders a color wheel from CSS named colors loaded as CSV data from a GitHub gist. The program uses React hooks (`useState`, `useEffect`) to fetch and parse the data with `d3.csv`, then maps each color to an SVG path segment using `d3.arc`. With dimensions of 960 by 500, each path is positioned around a central point, its fill set to the color’s hex value, creating a full circular visualization of all named colors. The D3 arc generator defines each segment’s angle based on the data index.

AI-generated description

A program that loading data from github gist and then parse it with D3.