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)

c6aa1672fdd34347ad0b1b555a882f14

Loading Data with React & D3

0 stars1🌍 Public
AAnthony Zornig
Last edited Oct 2, 2021
Created on Oct 2, 2021
Forked from Mouse Follower

This example demonstrates how to combine React state and D3’s data-loading utilities in a simple data summary application. The component fetches a CSV file from a GitHub gist using the `csv` method from d3.v5, storing the parsed result in React’s `useState` hook. While the data is pending, the interface displays “loading”; once resolved, it computes and presents the file size in kilobytes, row count, and column count via `d3.csvFormat` and the data’s `columns` array. The implementation uses `useEffect` and `useCallback` for lifecycle management, with ReactDOM rendering the final message as large, styled text.

AI-generated description

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