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)

539d1cdd2e80429f9eba08a1e46f5fb7

Loading Data with React and D3

0 stars0🌍 Public
KKian Candelario
Last edited Jul 3, 2022
Created on Jul 3, 2022

This example demonstrates how to load external data with D3 utilities while using React state to manage the fetched result. The dataViz component initializes with null data, then uses the useEffect hook to call d3.csv on a remote CSV file containing emission data, storing the result via setData. Once loaded, the message function displays formatted statistics about the dataset, including its size in kilobytes, row count, and column count. The code imports React, ReactDOM, and D3 v7 directly from CDN links in the HTML file, with the data rendered inside a pre element.

AI-generated description

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