Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

loading data in react

Public visualization

Viewing a saved revision (read-only)

9846eb37355447b9988d2e8ee9588d41

loading data in react

0 stars1🌍 Public
MMarco Malvicini
Last edited Apr 24, 2021
Created on Apr 16, 2021

This example shows how to load external CSV data in a React application using D3 utilities. The component displays a loading message until the data arrives, then shows a summary of the dataset—its size in kilobytes, row count, and column count—in large monospace text. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data-fetching lifecycle, calling `d3.csv` on the specified GitHub Gist URL and storing the parsed result in state. Only the data’s metadata is rendered, not the actual CSV contents.

AI-generated description

A program that loads in some data using d3 utilities and use react state to store the data