Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading data with React and D3

Public visualization

Viewing a saved revision (read-only)

c9e15c3d6d774a2d97ec5b300a8ee405

Loading data with React and D3

0 stars0🌍 Public
JJoakim Warholm
Last edited Jun 17, 2021
Created on Jun 16, 2021
Forked from Mouse follower

This example demonstrates how to load and display a dataset using React state and D3 utilities. It fetches a CSV file of CSS named colors with `d3.csv` and stores it via the `useState` hook, showing a loading message until the data arrives. Once loaded, the visualization renders each color as an SVG path using the `d3.arc` generator, with the fill color mapped from the CSV’s `RGB hex value` column. The app uses React 16.9 and D3 v7, combining React’s declarative rendering with D3’s data transformation and arc layout functions.

AI-generated description

A program that loads in some data using D3 utilities, and uses React state to keep track of the data.