Carregando dados de Covid19 com React e D3

100%

Carregando dados de Covid19 com React e D3

✓ Published1🌍 Public

Last edited Feb 8, 2023

Created on Jun 1, 2022

A single-page React and D3 example displays a large red text summary of cumulative COVID-19 deaths from the Johns Hopkins global time series dataset. It loads the CSV via `d3.csv`, identifies the latest date column, sums the numeric values with `Array.map` and `reduce`, and formats the total using `d3.format`. The result, showing the death count and date, is rendered into a `<pre>` element using plain DOM text assignment. The visualization is minimal, focusing on data loading and aggregation rather than charts.

AI-generated description

Este programa carrega e analisa o Johns Hopkins coronavirus Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Corona virus Data

This example displays the total global COVID-19 deaths as a large red number, along with the date of the latest data point. It loads a time-series CSV from the CSSE at Johns Hopkins using `d3.csv`, then parses the last column as the most recent date. The code sums all country values for that date using JavaScript’s `reduce`, formats the total with `d3.format`, and updates the page text via the DOM. The visualization is minimal, focusing solely on the computed aggregate without any charts or maps.

AAnkit-Ian-53787

83% match

Loading thumbnail…

Carregando dados com React e D3

This example demonstrates the amount of data contained in a CSV file by displaying its size in kilobytes, line count, and column count. It loads data from a remote URL hosted on GitHub Gists using the `d3.csv` and `d3.csvFormat` APIs, while React 18 manages the asynchronous state. The component initially shows a loading message before rendering the computed statistics, with a deliberate delay between fetches to avoid an infinite loop. The presentation uses a large monospace `<pre>` element with minimal styling.

AAlan Santos

82% match

Loading thumbnail…

Loading and Parsing Corona Virus Data

This example displays the total number of global COVID-19 deaths from the Johns Hopkins time series dataset, formatted with commas and labeled with the latest date column. It renders the result in a large red `<pre>` element. The code uses React 16.9 with hooks (`useState`, `useCallback`, `useEffect`) and D3 v7’s `csv` and `format` functions to fetch and parse the data, then reduces the last column values to calculate the sum.

KKazushige Okuma

82% 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…

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

82% match

Loading thumbnail…

Summarizing Coronavirus Data

This example displays the total global deaths from COVID-19 as a large red number in a `<pre>` element, updated to the most recent date in the dataset. It loads a CSV from the Johns Hopkins CSSE GitHub repository using `d3.csv`, extracts the last date column, sums all numeric values with `Array.reduce`, and formats the result with `d3.format`. The final message combines the comma-formatted total and the date, then injects it into the page via `textContent`.

MMichael Bruno

81% match

Loading thumbnail…

Summarizing Coronavirus Data

A single number dominates the page: the total global COVID-19 deaths, calculated as of the most recent date in the Johns Hopkins time-series dataset. The visualization reduces the entire pandemic’s toll to one large, red statistic, formatted with commas. The code loads the CSV with `d3.csv`, sums the latest column of death counts using JavaScript’s `reduce`, and displays the result via React by setting `textContent` on a `<pre>` element. It uses d3’s `format` helper to add comma separators.

KKtuzinowski

81% match

Loading thumbnail…

Untitled

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.

JJonas Carvalho

81% match