Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Loading Data in React

Public visualization

Viewing a saved revision (read-only)

1a302775746041a5a5802438c0fa9776

Loading Data in React

0 stars0🌍 Public
RRyanJHorwitz
Last edited Apr 6, 2022
Created on Apr 6, 2022
Forked from Mouse Follower

This example demonstrates how to load external CSV data and manage it with React state. The app fetches a dataset of CSS named colors from a GitHub gist using D3’s `d3.csv` utility inside a `useEffect` hook, then displays summary statistics—file size in kilobytes, row count, and column count—in a large `<pre>` element. React’s `useState` holds the parsed data while the component renders a “Loading…” message until the data arrives. The visualization combines D3 v7’s data-loading capabilities with React 16.9’s hooks for asynchronous state management, rendering text output via SVG-free HTML.

AI-generated description

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