Skip to main content
SimilarExport ZIP
100%

Coronavirus Deaths with D3 Axis

✓ Published1🌍 Public
KKtuzinowski
Last edited Jul 30, 2021
Created on Jul 30, 2021

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`.

AI-generated description

This program loads and parses the Johns Hopkins Coronavirus Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Global Coronavirus Deaths

This line chart visualizes global cumulative coronavirus deaths over time, with data from the Johns Hopkins Coronavirus Dataset. The y-axis includes a horizontal marker line at 10,000 deaths, while the x-axis features a vertical marker at the most recent date. Built with React and D3 v5, it uses `d3.scaleTime` for the time axis, `d3.scaleLinear` for the death count, and `d3.line` to generate the path. The chart is rendered as SVG, with axes and labels styled via CSS.

CCurran Kelleher
93% 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
92% match
Loading thumbnail…

Coronavirus Line Chart

This line chart visualizes the cumulative global death toll from the Johns Hopkins Coronavirus Dataset over time. The chart uses D3 v6 with React to load CSV data, transform it into daily sums, and render an SVG path via `scaleTime`, `scaleLinear`, and the `line` generator. The resulting graphic shows a single bold black curve tracing the death count across the entire dataset from its start to the present.

WWolfgang
92% match
Loading thumbnail…

Coronavirus Log Y Axis

This example visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset using a line chart with a logarithmic y-axis. The chart displays total deaths over time, with marker lines highlighting the current date and the 4,000,000 death threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLog` to map dates and death counts, while the `line` generator creates the path and `axisBottom` and `axisLeft` render axes. Data is loaded via `csv` and parsed with `timeParse`.

KKtuzinowski
91% match
Loading thumbnail…

Coronavirus Linear Scale

This visualization displays the global cumulative death toll from the Johns Hopkins COVID-19 dataset as a single line chart over time, using a linear scale for both axes. The line shows the total deaths increasing across the date range, with gridlines extending from the axis ticks. The React application parses the CSV data with d3.csv and d3.timeParse, then renders the SVG path using d3.line, d3.scaleTime, and d3.scaleLinear. Axis components use d3.axisBottom and d3.axisLeft, while the chart includes a vertical marker line labeled "now" at the latest date.

JJenny
91% match
Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart displays the global cumulative death toll from COVID-19 over time, based on the Johns Hopkins Coronavirus dataset. The chart plots daily total deaths with a black line, and includes a horizontal marker line at 10,000 deaths and a vertical marker at the most recent date, labeled with its formatted month and day. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate an SVG path, while custom `XAxis` and marker components render grid lines and labels.

Ooussama-chaabouni
91% match
Loading thumbnail…

Coronavirus line chart - global deaths Axes useRef and D3

This line chart displays global cumulative COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The visualization employs d3.scaleTime and d3.scaleLinear to map dates and death totals, with d3.line generating the path. React components use useRef and useEffect to integrate D3 axes via d3.axisBottom, while custom XMarkerLine and YMarkerLine components annotate the most recent date and the 500,000-death threshold. SVG rendering fills the viewport, with gridlines and styled ticks enhancing readability.

YYedrup
91% match
Loading thumbnail…

Fork of Global Coronavirus Deaths

This line chart displays the global cumulative death toll from COVID-19 over time, based on data from the Johns Hopkins Coronavirus Dataset. The visualization plots daily death totals on a linear y-axis against a time-scaled x-axis using d3.scaleTime and d3.scaleLinear, with the line generated via d3.line. Reference lines mark the 10,000-death threshold and the most recent date, implemented through custom React components. The SVG rendering is handled with D3 v5 and React, styled with minimal CSS.

JJoldon
90% match