Skip to main content
SimilarExport ZIP
100%

Coronavirus line chart - global deaths Axes useRef and D3

✓ Published2🌍 Public
YYedrup
Last edited Feb 7, 2021
Created on Feb 7, 2021

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.

AI-generated description

Line chart of Coronavirus cases to date. Data from Johns Hopkins Coronavirus Dataset.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Line Chart with D3 Axes

A line chart displays global cumulative COVID-19 deaths over time, sourced from the CSSE at Johns Hopkins. The React component renders an SVG path generated with d3.line and scales using d3.scaleTime and d3.scaleLinear. Horizontal and vertical marker lines indicate the one-million deaths threshold and the most recent date, labeled "now". Custom axes use d3.axisBottom with tick marks extending across the chart, while CSS styles the path and gridlines.

RRMartins11
95% 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…

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
Loading thumbnail…

Coronavirus line chart - Linear Y Axis

A line chart displays cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins Coronavirus Dataset. The chart uses a linear y-axis scale (d3.scaleLinear) and a time-based x-axis (d3.scaleTime), with the line path generated via d3.line. React manages component state, while d3.axisBottom and d3.axisLeft render the axes with tick marks extending across the plot area. SVG elements draw the chart, styled with CSS for gridlines and the line stroke.

YYedrup
93% match
Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part I

This line chart displays global cumulative COVID-19 deaths over time from the Johns Hopkins dataset, with a horizontal marker line at the one-million-death threshold. The React component uses D3 v6 functions `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` to construct an SVG path. Data loading relies on `csv` and `timeParse` to transform daily country-level death counts into aggregated totals. The marker line is drawn as an SVG `<line>` element, while the path is unstyled except for a black stroke defined in the page’s CSS.

WWolfgang
92% match
Loading thumbnail…

Coronavirus line chart - global deaths - marker line 500k

A line chart tracks cumulative global COVID-19 deaths over time using a timeline from the Johns Hopkins dataset, with a horizontal marker line at 500,000 deaths and a vertical marker labeled "now" at the most recent date. The React component builds a D3 v5 `scaleTime` and `scaleLinear` to map dates and totals, then uses a `line` generator to draw the SVG path. Custom `YMarkerLine` and `XMarkerLine` components render the threshold and current-date annotations, emphasizing the crossing of the half-million milestone.

YYedrup
92% match
Loading thumbnail…

Coronavirus line chart - global deaths

A line chart tracks cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The chart plots dates on a time scale and death totals on a linear scale, with a horizontal marker line highlighting the 500,000-death threshold. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `line` from d3 to generate an SVG path, while `csv` and `timeParse` handle data loading and date parsing.

YYedrup
92% match
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
92% match