Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

10-loading data with react & d3

Public visualization

Viewing a saved revision (read-only)

fa5c6ccfcd3946a3be45a8234bc43c7e

10-loading data with react & d3

0 stars1🌍 Public
Mmygynt679
Last edited Apr 10, 2023
Created on Apr 10, 2023

This example demonstrates React’s useState and useEffect hooks managing asynchronous data loading with d3.csv, fetching a CSS named colors dataset from a GitHub gist. The App component stores the parsed CSV in state and displays a summary message via the exported message function, which formats file size, row count, and column count using d3.csvFormat and data.columns. While loading, the interface shows “Loading...”, then swaps to the formatted statistics. The visualization relies on React 18 and D3 v7, with d3.csv returning a promise chain via .then(setData), rendering output as a large pre-formatted text block.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.