Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
KKazushige Okuma
Last edited Nov 1, 2021
Created on Nov 1, 2021

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.

AI-generated description
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
95% 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
95% 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
93% 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
93% match
Loading thumbnail…

CoronaVirus Linear Chart

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.

AAmir
93% match
Loading thumbnail…

Coronavirus Linear Y Axis

This chart visualizes global COVID-19 death totals over time using a linear Y axis, with a black line path showing the cumulative deaths and gridlines from D3 axes. The example uses React and D3 v6, with `scaleTime`, `scaleLinear`, and `line` from d3 to generate the SVG path, while `axisBottom` and `axisLeft` render the tick marks. Data comes from the Johns Hopkins Coronavirus Dataset, loaded via `csv` and transformed with `timeParse`. Marker line components display a vertical reference at a specific date and a horizontal “1M” threshold.

WWolfgang
92% match
Loading thumbnail…

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

This chart tracks global cumulative COVID-19 deaths over time using a logarithmic y-axis to accommodate exponential growth. Rendered with React and D3 v5, it employs `scaleTime` and `scaleLog` with `d3.line` to plot the trend, while custom `XAxis` and `YAxis` components leverage `axisBottom` and `axisLeft` with gridlines and formatted ticks. Data comes from the CSSE COVID-19 time series CSV, which is fetched and aggregated daily. The SVG visualization includes labeled axes and a marker line indicating the final date (11/30/2021).

KKazushige Okuma
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
92% match