Loading and Parsing Coronavirus Data

100%

Loading and Parsing Coronavirus Data

✓ Published0🌍 Public

Last edited Oct 12, 2023

Created on Oct 12, 2023

Forked from Loading and Parsing CSV 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.

AI-generated description

Coronavirus Dataset](https://github.com/CSSEGISandData/COVID-19/blob/master/csse_covid_19_data/csse_covid_19_time_series/time_series_19-covid-Deaths.csv).

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example visualizes the cumulative global death toll from the Johns Hopkins Coronavirus Dataset as a time-series line chart in SVG. Marker lines highlight the current date and the 20,000,000 death milestone. The React app uses `useData` with D3’s `csv` and `timeParse` to load and transform the raw data, while the chart component builds scales with `scaleTime` and `scaleLinear` and generates the path via `line`. D3 version 5 is used throughout.

JJenny

92% match

Loading thumbnail…

Pulling Live Coronavirus Data

This example displays a line chart of global cumulative coronavirus deaths over time, using a logarithmic y-axis to accommodate the wide range of values. It loads live data from the Johns Hopkins COVID-19 dataset via `d3.csv`, parsing dates with `d3.timeParse`. The React components render SVG elements, with `d3.scaleTime` for the x-axis and `d3.scaleLog` for the y-axis. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while the line path is generated with `d3.line`. Gridlines and tick labels are styled via CSS in the embedded `<style>` block.

CCurran Kelleher

90% match

Loading thumbnail…

use d3 Axis Coronavirus data

This example presents a line chart of cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins CSSE time-series dataset. Using React with D3 v7, it maps dates to a time scale and death totals to a linear scale, rendered as an SVG path. Custom XAxis and YAxis components leverage d3.axisBottom and d3.axisLeft with gridlines, while the chart’s axes and line are styled via CSS. The visualization resizes to the window dimensions and updates through a loading state while fetching CSV data.

BBlake McCarty

89% match

Loading thumbnail…

Fork of Loading and Parsing Coronavirus Data with D3 Axes

This visualization displays the cumulative global COVID-19 death toll over time, using a line chart that spans the entire dataset from the Johns Hopkins Coronavirus time series. The chart includes horizontal and vertical marker lines highlighting the milestone of 20,000,000 deaths and the current date. Built with React and D3 v6, the code uses `scaleTime`, `scaleLinear`, and `line` generators to plot the data, while `XAxis` and marker components render SVG axes and annotations. The data is loaded and parsed with D3’s `csv` and `timeParse` functions.

JJenny

89% match

Loading thumbnail…

react + d3 axes

This example shows global coronavirus deaths over time as a single bold line, with horizontal reference lines at one million and two million deaths, plus a vertical marker at the most recent date. The visualization uses React components to render an SVG chart, while D3 v6 handles scales, the line generator, and bottom axis via `scaleTime`, `scaleLinear`, `line`, and `axisBottom`. Data comes from the Johns Hopkins COVID-19 global deaths time series, loaded with `csv` and parsed with `timeParse`. Custom React components manage the axis, marker lines, and rotated tick labels.

AAnthony Ynami

88% match

Loading thumbnail…

React + D3 Axes

This example shows a COVID-19 global death toll line chart over time, with dashed reference lines marking the most recent date and the one-million-deaths threshold. Built with React components and D3 scales, the chart uses `scaleTime` and `scaleLinear` to position the line, while separate `XAxis` and `XMarkerLine`/`YMarkerLine` components render the axis and annotations via SVG. Data is loaded from the Johns Hopkins CSSE GitHub CSV and transformed with `csv` and `timeParse`.

Ffjvoris

88% match

Loading thumbnail…

React + D3 axis (Coronavirus Deaths)

This example shows a line chart of cumulative global coronavirus deaths over time, drawn with D3 scales and a React-generated SVG. The chart highlights the most recent date with a vertical marker line labeled “now” and a horizontal reference line at 3,000,000 deaths. React components manage the SVG structure, while D3’s `scaleTime`, `scaleLinear`, and `line` generator compute positions and the path. Axes are rendered using `d3.axisBottom` within a React effect. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`.

Ee-ines

88% match

Loading thumbnail…

coronavirus line

This line chart visualizes global COVID-19 deaths over time as a single increasing curve. The data comes from the CSSE at Johns Hopkins, aggregated from all countries on each date. Built with React and D3 v6, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and renders the line as an SVG path. The chart loads CSV data asynchronously via `d3.csv` and transforms it using `timeParse`.

JJonas Carvalho

88% match