Untitled

100%

✓ Published1🌍 Public

Last edited May 16, 2021

Created on Apr 4, 2021

Forked from Loading data with react and d3

This example loads a COVID-19 deaths time series from a GitHub-hosted CSV file using d3.csv, then displays summary statistics (kilobytes, column count, row count) via a React component. It uses React's useState and useEffect hooks to fetch and manage the data asynchronously, and the d3.range method to iterate once. The visualization ultimately renders a single face-like SVG shape—composed of circles with randomized eye, mouth, and stroke parameters—centered on a 960×500 canvas. The d3.csvFormat API is used to calculate the data size in kilobytes.

AI-generated description

Loading data with d3 and using react

MIT Licensed

Similar vizzes

Loading thumbnail…

Corona Virus

This visualization reports basic statistics on a global COVID-19 deaths dataset, displaying file size, row count, and column count as plain text. Using React with hooks, the code fetches the CSV from the Johns Hopkins CSSE GitHub repository via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its size in kilobytes. The view updates after the asynchronous data load, showing a loading message until the fetch completes. It relies on D3 v6 for data parsing and formatting within a React 17 component tree.

CCarlos Caballero

84% match

Loading thumbnail…

Loading and Parsing Coronavirus Data

A line chart displays global cumulative COVID-19 deaths over time, sourced from a GitHub CSV of Johns Hopkins data. The React app loads and parses the CSV with `d3.csv`, resamples the timeline with `d3.timeParse`, and renders an SVG via React components. Axes and grid lines are built with `d3.axisBottom` and `d3.axisLeft`, while marker lines annotate the 10,000-death threshold and the most recent date.

TTatyana Milanova

83% match

Loading thumbnail…

Data with React and D3

This example shows how to load and summarize COVID-19 case data from a CSV file using React and D3. The code fetches a May 2020 dataset from a GitHub gist via the `d3.csv` method, then displays basic metadata about the file, including its size in kilobytes, number of rows, and number of columns. The React app manages the loading state with the `useState` and `useEffect` hooks, rendering a loading message until the data arrives and then presenting the computed statistics. The visualization relies on `d3.csvFormat` to calculate the data size and ReactDOM to mount the component.

Mmanasishrotri

83% match

Loading thumbnail…

Fork of Fork of Loading and Parsing CORONAVIRUS

This example displays a text summary of COVID-19 global death data parsed from a CSV file hosted by the CSSE at Johns Hopkins. It uses `d3.csv` to fetch and parse the time-series data, then computes the total deaths from the latest date column using JavaScript’s `reduce`. The displayed message includes file size, row and column counts, the final date, and the formatted death total via `d3.format`. The results are rendered inside a styled `<pre>` element, with the code running in a React-based build using D3 v5.

Jjesramyep1263

82% match

Loading thumbnail…

React + D3 Axes

This example shows a React line chart tracking cumulative global COVID-19 deaths over time, using data from a CSSE GitHub CSV. Two marker lines highlight the current date and the 3,000,000 death threshold, with the axes rendered via D3’s `axisBottom` and React refs. The chart uses `scaleTime`, `scaleLinear`, and `line` generators to compute the path, while SVG elements handle the visualization. Loading is handled asynchronously with `useData` and `csv`, and the grid lines use custom tick styling.

Wwindwaver

82% match

Loading thumbnail…

680 Assignment

This example presents a line chart tracking the cumulative total of COVID-19 deaths over time, based on the Johns Hopkins Coronavirus dataset. The visualization uses D3 v5 within a React framework to render an SVG path, with a time-scaled x-axis and linear y-axis. Axis components are built using `d3.axisBottom` and `d3.axisLeft`, while gridlines and markers are drawn as separate React components. The data is loaded via `d3.csv` and transformed to daily death totals.

KKofi Adu-Gyan

82% match

Loading thumbnail…

Fork of React + D3

This example shows global cumulative COVID-19 deaths over time as a line chart, with a logarithmic y-axis and a marker line highlighting the one-million-death threshold. The chart is rendered as SVG using React components that wrap D3 scales and axis generators, including `d3.scaleLog`, `d3.scaleTime`, and `d3.axisBottom`/`axisLeft`. Data is fetched from a CSV file via `d3.csv` and processed with `d3.timeParse` and array reduction. The visualization pairs React’s declarative component structure with D3’s data manipulation and layout utilities.

Jjesramyep1263

82% match

Loading thumbnail…

Fork of Loading and Parsing CORONAVIRUS

This example demonstrates how to load and parse global COVID-19 death data from a CSV file hosted on GitHub. Using d3.csv, it fetches the time-series dataset and calculates the total deaths from the most recent date column. The interface displays summary statistics, including the CSV file size in kilobytes, the number of rows, the number of columns, and the label of the latest data column. The code also includes commented-out alternatives using fetch with async/await and a nested promise chain.

Jjesramyep1263

81% match