Fork of Loading and Parsing Coronavirus Data with D3 Axes

100%

Fork of Loading and Parsing Coronavirus Data with D3 Axes

✓ Published1🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

Forked from Loading and Parsing Coronavirus Data

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.

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

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

90% match

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

89% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

This line chart visualizes the cumulative global death toll from the COVID-19 pandemic over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal marker highlights when deaths reach 10,000, while a vertical marker labels the most recent date on the x-axis. Built with React and D3 v5, the visualization uses SVG rendering via `scaleTime`, `scaleLinear`, and `line` generators, with axes drawn using `axisBottom`. The chart pulls its data asynchronously from a CSV file fetched via D3’s `csv` function and transforms daily death counts into a date series.

Oo-n-e

88% match

Loading thumbnail…

Fork of React + D3

This example shows global cumulative COVID-19 deaths over time as a line chart, with a logarithmic y-axis and a marker line highlighting the one-million-death threshold. The chart is rendered as SVG using React components that wrap D3 scales and axis generators, including `d3.scaleLog`, `d3.scaleTime`, and `d3.axisBottom`/`axisLeft`. Data is fetched from a CSV file via `d3.csv` and processed with `d3.timeParse` and array reduction. The visualization pairs React’s declarative component structure with D3’s data manipulation and layout utilities.

Jjesramyep1263

88% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart visualizes the cumulative global death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. The chart is built with React and D3 v5, leveraging D3’s `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` APIs to map dates and death totals. A horizontal marker line highlights the 10,000-death threshold, while a vertical marker indicates the most recent date, formatted with `timeFormat`. SVG renders the line with a thick black stroke, and axes use D3’s `axisBottom`.

NNelson Kalgushkin

88% match

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This line chart displays the cumulative total of COVID-19 deaths over time using a linear y-axis scale. It fetches data from the Johns Hopkins Coronavirus time-series dataset via `d3.csv` and aggregates daily death totals. The chart is rendered with React (version 16.9) and SVG, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Gridlines are drawn by setting `tickSize` on the axes, and the chart fills the entire browser window, updating responsively.

CCheng Tang

88% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

This line chart shows the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A marker line highlights when deaths reached 10,000, and a vertical marker notes the most recent date. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, a D3 `line` generator for the path, and custom `XAxis` and marker components rendered as SVG.

YYedrup

88% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart displays cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The chart maps dates to the x-axis and death totals to the y-axis via `scaleTime` and `scaleLinear`, with the line generated by `d3.line`. React components handle the SVG rendering, while `useData` fetches and transforms the CSV with `d3.csv` and `timeParse`. Reference marker lines are defined but not currently invoked.

Ssenilefork

88% match