Skip to main content
SimilarExport ZIP
100%

CoronaVirus Linear Chart

✓ Published1🌍 Public
AAmir
Last edited Mar 22, 2021
Created on Mar 22, 2021

Using D3 v5 within a React component, this chart visualizes global cumulative COVID-19 deaths over time from the JHU CSSE dataset. A single SVG line path traces the rising death totals, with gridlines and labeled axes generated by `d3.axisBottom` and `d3.axisLeft`. The code scales dates with `d3.scaleTime` and death counts with `d3.scaleLinear`, fetching data via `d3.csv` and formatting it with custom parsing and reduction logic.

AI-generated description

JHU CSSE COVID-19 Dataset Johns Hopkins University data sheet

MIT Licensed

Similar vizzes

Loading thumbnail…

CoronaVirus Linear Y Chart

This example visualizes the global cumulative death totals from the COVID-19 pandemic over time using a linear y-axis line chart. The chart is built with React and D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.line` to generate the SVG path. Data is loaded via `d3.csv` from a Johns Hopkins CSSE time-series dataset. The axes are rendered as reusable React components that call `d3.axisBottom` and `d3.axisLeft` inside `useEffect` hooks.

33ssalunke
94% match
Loading thumbnail…

Corona virus Linear Y axis

This line chart visualizes the cumulative global COVID-19 death toll over time, using a linear Y-axis to show the raw magnitude of growth. The chart is rendered as an SVG in React, with D3’s `scaleTime` and `scaleLinear` mapping dates and death counts, while `axisBottom` and `axisLeft` generate the gridlines. Data comes from a JHU CSSE CSV file, parsed with `timeParse` and aggregated by summing daily country totals. A single black path, drawn with `d3.line`, traces the steep upward trajectory.

Ccynichole
93% match
Loading thumbnail…

Corona Virus Linear Y Axis Chart (React + D3 Axis)

This example shows the cumulative global death toll from COVID-19 over time, plotted on a linear y-axis. The React component renders an SVG line chart using D3 scales (`d3.scaleTime`, `d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`), with gridlines and annotation markers. It loads time-series data from a public GitHub CSV via `d3.csv`, aggregates daily totals, and draws the path with `d3.line`. The chart fills the viewport and updates automatically when the data arrives.

KKazushige Okuma
93% match
Loading thumbnail…

Corona Virus Line Chart (React + D3 Axis)

This example visualizes the global cumulative death toll from COVID-19 over time as a single grey line chart. The visualization combines a React app for layout and component composition with D3 v5 utilities for scales and axis rendering. Data is fetched from a CSV maintained by the CSSE at Johns Hopkins, aggregated globally per day, with D3’s `csv` and `timeParse` handling ingestion. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, `line` for the path, and `axisBottom` for the x-axis, while custom marker lines highlight the 5-million-death threshold and the final date.

KKazushige Okuma
92% match
Loading thumbnail…

CoronaVirus Line Chart with Axis

The chart shows the global cumulative death total from the COVID-19 pandemic over time, using a line path drawn with D3 v5’s `line` generator and scales from `scaleTime` and `scaleLinear`. Horizontal markers at 10,000, 100,000, 500,000, 1,000,000, and 2,000,000 deaths are rendered as rudimentary y-axis gridlines with labels, and the x-axis is built with `axisBottom` and custom tick sizing. Data comes from the Johns Hopkins University CSSE time series CSV, fetched via `d3.csv`, and the visualization is implemented as a React component rendering an SVG.

AAmir
92% match
Loading thumbnail…

Coronavirus Linear Y Axis

This visualization displays cumulative COVID-19 deaths over time using a standard linear y-axis, drawn as an SVG path. It loads global death data from the Johns Hopkins CSSE time-series dataset via `d3.csv` and parses dates with `d3.timeParse`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for its axes, with gridlines generated by `d3.axisBottom` and `d3.axisLeft`. React manages the component structure, while D3 v7 handles the line generation with `d3.line` and scales.

KKtuzinowski
91% match
Loading thumbnail…

CoronaVirus Linear Y Axis

This visualization plots the cumulative global death toll from COVID-19 over time on a linear y-axis scale, with a line chart showing the total deaths per day. The chart includes vertical and horizontal marker lines highlighting the most recent date and the 10,000 death threshold, respectively. Built with React and D3 v7, the code uses `scaleTime` and `scaleLinear` for axes, `line` for the path generator, and `axisBottom`/`axisLeft` for tick rendering. The data is fetched from the CSSEGISandData COVID-19 time series CSV via `d3.csv`.

SSerind Joshua McCue
91% match
Loading thumbnail…

CoronaVirus Line Chart

This visualization displays the global cumulative death toll from COVID-19 over time as a single black line chart. It uses a React component with D3 v5 scales (`scaleTime`, `scaleLinear`) and a `line` generator to plot data from the JHU CSSE COVID-19 time series dataset. Dashed horizontal markers label key thresholds (10,000 to 2,000,000 deaths) via a custom `YMarkerLine` component, which draws SVG `<line>` elements and formatted text labels. The chart fills the browser window and updates when new data is loaded.

AAmir
91% match