CoronaVirus Line Chart with Axis

100%

CoronaVirus Line Chart with Axis

✓ Published1🌍 Public

Last edited Mar 22, 2021

Created on Mar 22, 2021

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.

AI-generated description

JHU CSSE COVID-19 Dataset Johns Hopkins University data sheet

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

CoronaVirus Line Chart

A line chart displays the cumulative global death toll from COVID-19 over time, based on data from the CSSE at Johns Hopkins University. The chart marks the most recent date with a vertical “now” line and highlights thresholds at one and two million deaths with horizontal reference lines. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the SVG path from a dataset transformed from CSV by summing daily death totals across all countries.

33ssalunke

94% 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

94% match

Loading thumbnail…

Coronavirus Line Chart with D3 Axes

A line chart visualizes the cumulative global COVID-19 death toll over time using the John Hopkins Coronavirus Dataset. It plots daily death totals on a linear scale and dates on a time scale, with a red marker line highlighting the 1 million death milestone and an "now" marker at the most recent date. The chart is built with React and renders SVG paths using D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators, while axes are drawn declaratively via `axisBottom` and custom marker-line components. Grid lines are styled with CSS.

CChris Briggs

93% match

Loading thumbnail…

Corona Virus Line Chart

This line chart visualizes the cumulative death toll from COVID-19 over time, with a single black line tracing the global trend. A horizontal marker at 10,000 and a vertical marker at the latest date provide visual reference points. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, and a `line` generator to plot data from a CSSE GitHub CSV. The SVG rendering includes custom marker components for the annotations, and data is loaded asynchronously via `d3.csv`.

SSerind Joshua McCue

93% 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…

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

93% match

Loading thumbnail…

Coronavirus Line Chart with D3 Axis

This chart visualizes global COVID-19 death totals over time using a line path, with a horizontal marker at the 1 million death threshold and a vertical marker at the most recent date. The React component uses D3 scales (scaleTime, scaleLinear) and a line generator to map the Johns Hopkins dataset, while custom XAxis and marker components render grid lines and labels. SVG output displays the path with a bold black stroke, styled tick marks, and formatted date labels.

WWolfgang

93% match