Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading data with React & d3

Public visualization

Viewing a saved revision (read-only)

04f518892fe0486fbf4783f9e5dd5af1

Loading data with React & d3

0 stars1🌍 Public
TTakuya Kitazawa
Last edited Jan 13, 2021
Created on Jan 12, 2021
Forked from Mouse Follower

This example shows a pie chart of CSS named colors rendered as SVG, where each slice represents one color from a CSV dataset loaded from a GitHub gist. Using React state, the `useEffect` hook triggers `d3.csv` to fetch the data, and conditional rendering displays a loading message until the data arrives. The `d3.pie` and `d3.arc` functions compute the pie layout, with each colored path fill derived from the hex value column. The dataset contains 148 color rows with columns for name and RGB hex value.

AI-generated description

Load data using d3, and keep track with React State