100%

covid19-data

✓ Published0🌍 Public

Last edited Sep 11, 2025

Created on Sep 4, 2025

This example displays the raw COVID-19 dataset as a formatted JSON preview, loading the CSV file via `fetch` and parsing it with `d3.csvParse`. The visualization shows the first rows of data, including date, region, confirmed cases, deaths, and recoveries, placing each field on a separate line for inspection. The code uses `d3.select` to manage a container element and `d3.selectAll` with a `join` operation to update the displayed content whenever the state changes, initially setting the data to a `'LOADING'` placeholder before fetching the file.

AI-generated description

Dataset 2: COVID-19 Dataset

Source:
COVID-19 Dataset (Corona-Virus Report)

This dataset provides global daily data for COVID-19, including confirmed cases, deaths, and recoveries by country. It’s ideal for visualizing the pandemic’s spread, comparing regional impacts, and exploring trends over time.

Attributes and Types

Date — Categorical, ordered (time)
Country/Region — Categorical, nominal
Confirmed — Quantitative, ratio
Deaths — Quantitative, ratio
Recovered — Quantitative, ratio

MIT Licensed

Similar vizzes

Loading thumbnail…

Fetch Data

This example demonstrates how to load and inspect a CSV dataset from a remote URL using D3. It fetches the latest COVID-19 data from Our World in Data via `d3.csv` and logs the column names to the console, displaying the raw data structure. The visualization renders an empty SVG canvas sized to the viewport, with commented-out code hinting at potential animated circle transitions. The implementation relies on D3 v6, specifically the `select` and `csv` APIs, within a Promise-based async function.

Ddaria.daria

81% match

Loading thumbnail…

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count of a COVID-19 dataset for 2021. The page renders an SVG image of a virus alongside the data summary. The code uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to calculate the formatted data size. The result is displayed in an HTML `<pre>` element via the DOM API, with styling handled by the included CSS.

KKande2011

80% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV dataset of COVID-19 vaccination trends in the US, displaying a summary of the data‘s size, row count, and column count. The visualization uses d3.csv to fetch and parse the data from a GitHub Gist, then formats the statistics with d3.csvFormat. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, illustrating different approaches to asynchronous data loading in D3 v5.

Ccshm407

80% match

Loading thumbnail…

Visualisation

This example demonstrates loading and parsing a CSV file containing COVID-19 daily case data using D3 v5. The visualization sets up an SVG canvas with dimensions retrieved directly from the markup, and uses the `csv` and `select` APIs from D3 to fetch the data and log it to the console. Although no chart is rendered, it showcases the foundational workflow of importing D3 modules, loading external data via UNPKG, and preparing the SVG for future drawing operations.

Ssherman-wq

79% match

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates loading a global COVID-19 death time-series dataset using D3 v5. It fetches a CSV file from the Johns Hopkins CSSE GitHub repository and parses it with `d3.csv`. The visualization displays a large-text summary showing the data’s size in kilobytes, the number of rows, and the number of columns, computed via `d3.csvFormat` and the parsed array’s properties. It relies on the native `fetch` API and a promise handler, with commented alternatives using `async`/`await` and nested callbacks.

Wwindwaver

79% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a COVID-19 World Vaccination Progress CSV dataset by rendering the file size in kilobytes, row count, and column count in large text. It uses the D3.js library’s `d3.csv` method to fetch and parse the remote CSV file, then accesses the resulting parsed data’s `columns` property to determine the number of columns. The visualization demonstrates a straightforward data-loading workflow, showing the parsed dataset’s basic metadata rather than plotting the actual values. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`.

GGerasimos Katsagannis

78% match

Loading thumbnail…

CoronaViruz Data

This example demonstrates a minimal approach to fetching and parsing CSV data, which in this case is meant to represent a dataset about the Coronavirus. The code uses the `fetch` API to retrieve text from a specified URL and then applies D3's `d3.csvParse` method to convert the raw CSV text into a structured array of JavaScript objects. The parsed data is logged to the console, showcasing the initial step of loading external data for potential visualization. The example relies on D3 version 7, loaded from a CDN, and runs within a standard HTML page.

BBubfield

77% match

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse a COVID-19 time-series dataset from the CSSEGISandData GitHub repository. It displays a summary of the loaded data, including its size in kilobytes, row count, and column count, using a large text message. The code relies on D3 v5’s `d3.csv` to fetch the CSV file and `d3.csvFormat` to calculate the data size, then updates the DOM via `textContent`. The visualization is purely a data-loading diagnostic, not a graphical chart.

NNita

77% match