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)

25d00cc9b50741a59674e511efe212d5

Loading Data with React and D3

0 stars1🌍 Public
AAriana
Last edited Jul 20, 2021
Created on Jul 13, 2021

This example demonstrates how React state and D3 can work together to asynchronously load and summarize a CSV dataset of CSS named colors. The app renders a text summary displaying the file size in kilobytes, row count, and column count once the data arrives. The code uses `d3.csv` inside a React `useEffect` hook to fetch the remote CSV, while `useState` manages the loading state. The final message is formatted using `d3.csvFormat` to calculate the data’s byte length, with ReactDOM rendering the result as SVG-adjacent text in a `<pre>` element.

AI-generated description

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