Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Data with React - Pinwheel

Public visualization

Viewing a saved revision (read-only)

fdcda1ad01f04a29a137d55445de2b1d

Rendering Data with React - Pinwheel

0 stars0🌍 Public
Hhagerka
Last edited Jun 2, 2022
Created on Jun 2, 2022

This visualization renders a pinwheel of CSS named colors using React for the user interface and D3 utilities for data loading and arc generation. It fetches color data from a CSV file via `d3.csv`, then maps each row to an SVG `<path>` element with a fill color derived from the `RGB hex value`. The pinwheel shape is created by varying the `outerRadius` based on the index modulo 25, while angular slices are computed with a custom `pieArc` function using start and end angles proportional to the data length.

AI-generated description

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