Skip to main content
SimilarExport ZIP
100%

Loading and Parsing Coronavirus Data

✓ Published1🌍 Public
JJenny
Last edited Mar 9, 2021
Created on Mar 8, 2021

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.

AI-generated description

A program that loads and parses the Johns Hopkins Coronavirus Dataset

MIT Licensed

Similar vizzes

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
92% 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
90% match
Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part I

This line chart displays global cumulative COVID-19 deaths over time from the Johns Hopkins dataset, with a horizontal marker line at the one-million-death threshold. The React component uses D3 v6 functions `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` to construct an SVG path. Data loading relies on `csv` and `timeParse` to transform daily country-level death counts into aggregated totals. The marker line is drawn as an SVG `<line>` element, while the path is unstyled except for a black stroke defined in the page’s CSS.

WWolfgang
88% 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
88% match
Loading thumbnail…

Pulling Live Coronavirus Data

This example shows the global cumulative death toll from COVID-19 over time as a single line chart with a logarithmic y-axis. It loads live data from the Johns Hopkins Coronavirus dataset via `d3.csv` and computes daily totals by summing country values. The chart is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, while `line` generates the path. SVG rendering with axis labels and gridlines is used, and the chart updates automatically when new data is fetched.

Wwindwaver
88% 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
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…

Coronavirus Deaths with D3 Axis

This example visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset as a line chart over time. The chart plots daily totals, with a bold black line for the trend, and highlights two reference points: a horizontal marker at 4,000,000 deaths and a vertical “now” marker at the latest date in the data. Built with React and d3.v7, it uses `scaleTime`, `scaleLinear`, and `line` from D3 to generate the path, while `axisBottom` from D3 renders the x-axis with gridlines. The SVG output is styled with CSS, and the data is fetched and parsed via `csv` and `timeParse`.

KKtuzinowski
88% match