Corona Virus

100%

✓ Published0🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

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.

AI-generated description

use react, d3, to parse and visualize corona virus data

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Corona Virus Data

This example displays basic statistics about a COVID-19 deaths time-series dataset. The visualization reports the file size in kilobytes, the number of data rows, and the number of data columns in large text. It loads the global death records from the CSSE at Johns Hopkins repository using the `d3.csv` method to fetch and parse the remote CSV file. The code then uses `d3.csvFormat` to measure the payload size and accesses the resulting data array and its `columns` property.

RRasike Abeyratne

87% match

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

86% match

Loading thumbnail…

Loading and Parsing Coronavirus Data

This visualization demonstrates how to load and parse the Johns Hopkins Coronavirus Dataset, displaying basic file statistics in a large preformatted text element. It fetches the global deaths time series CSV via `d3.csv`, then computes the data size in kilobytes using `d3.csvFormat`, and counts the rows and columns from the parsed array and its `data.columns` property. The final message shows the latest date column, total file size, row count, and column count, all rendered into the DOM via `textContent`. The example highlights D3’s Promise-based data loading and inspection of CSV metadata.

KK3zter

86% match

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example displays basic statistics about the Johns Hopkins Coronavirus Dataset, showing the file size in kilobytes, row count, and column count in large text. It loads the CSV data with `d3.csv` and its promise-based `.then` method, then uses `d3.csvFormat` to calculate the data size. React is used as the framework, though the visualization itself is a simple text output via the DOM. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`.

Zzhangwbhi

86% 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

86% match

Loading thumbnail…

Loading and Parsing Coronavirus CSV Data

This example demonstrates loading and parsing the Johns Hopkins Coronavirus global deaths time-series CSV dataset, displaying its size in kilobytes, row count, and column count. It uses d3.csv to fetch and parse the remote CSV file, then calls d3.csvFormat on the resulting data to measure its formatted length. The interface presents these metrics in a large HTML `<pre>` element, with the React framework integrating the D3 v5 code. The code also comments on alternative approaches using fetch, async/await, and nested promises.

CChris Briggs

86% match

Loading thumbnail…

Loading and Parsing Corona Virus Data

This example demonstrates the basic process of loading and parsing the Johns Hopkins Coronavirus dataset using D3.js. It fetches a CSV file containing global COVID-19 death statistics and reports the number of rows, columns, and file size in kilobytes. The visualization uses `d3.csv` to asynchronously retrieve and parse the remote data, then displays the summary information as large HTML text via `document.getElementById` and `textContent`. The output provides a quick overview of the data’s structure without any graphical charting.

SShanmukh

85% match

Loading thumbnail…

Corona Deaths for May 14, 2021

This visualization displays basic statistics about the global COVID-19 death dataset from Johns Hopkins University, showing the file size, row count, and column count for the data as of May 14, 2021. Using D3 v5, the program loads the CSV file via `d3.csv` and accesses the parsed data's `.columns` property to determine the number of columns. The code formats the file size using `d3.csvFormat` and calculates the byte length, then displays the three metrics in a large `<pre>` element. This example demonstrates a minimal data-loading and summary-display pattern rather than a graphical chart.

Nnexus1058

84% match