Skip to main content
SimilarExport ZIP
100%

Coronavirus Line Chart with Marker Lines Part II

✓ Published1🌍 Public
WWolfgang
Last edited Apr 11, 2021
Created on Apr 9, 2021

This chart displays cumulative global COVID-19 deaths over time as a line path, with marker lines highlighting the one million death threshold and the current date (“Now”). The code uses d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path from the Johns Hopkins Coronavirus Dataset, which is loaded via d3.csv. React manages the component state, while custom XMarkerLine and YMarkerLine components draw the annotated reference lines.

AI-generated description

This chart uses React & D3 to visualize the Johns Hopkins Coronavirus Dataset.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Coronavirus Line Chart with Marker Line

This line chart displays the global cumulative COVID-19 death toll over time from the Johns Hopkins dataset, with a vertical marker line at the current date and a horizontal marker line at the one-million-death threshold. The visualization uses React to render an SVG path generated by d3.line, with d3.scaleTime and d3.scaleLinear mapping dates and death totals. Marker lines are drawn as separate React components (XMarkerLine, YMarkerLine) using d3 scales for positioning, while the data is loaded and parsed via d3.csv.

KKtuzinowski
95% match
Loading thumbnail…

Coronavirus Line Chart with Marker Line

This visualization displays global COVID-19 death totals over time as a single bold line, with a horizontal marker line highlighting the one-million-death threshold. The React component uses d3.scaleTime and d3.scaleLinear to map dates and cumulative deaths to SVG coordinates, while d3.line generates the path. Data comes from the CSSEGISandData COVID-19 time-series CSV, loaded via d3.csv and aggregated daily. The marker line is a static SVG `<line>` positioned using the y-scale’s output for one million deaths.

RRMartins11
94% match
Loading thumbnail…

Coronavirus Line Chart with Marker Line

A line chart visualizes the global cumulative total of COVID-19 deaths over time, with a horizontal marker line positioned at one million deaths. The chart uses React to render an SVG, with scales and line generation handled by d3.scaleTime, d3.scaleLinear, and d3.line. The data comes from a CSV file provided by the COVID-19 Data Repository at Johns Hopkins University, loaded via d3.csv and transformed by grouping daily death totals.

Ffjvoris
94% match
Loading thumbnail…

Coronavirus Line Chart With 3,000,000 Marker Line

The chart displays global COVID-19 death totals over time as a black line, with horizontal and vertical dashed markers indicating the 3,000,000 death threshold and the current date. Built with React and d3.scaleTime, d3.scaleLinear, and d3.line, it renders an SVG path from data fetched via d3.csv from the Johns Hopkins CSSE repository. The YMarkerLine and XMarkerLine components draw labeled annotations, while the text elements use SVG alignment attributes to position labels. The visualization updates dynamically as new data becomes available in the source CSV.

Wwindwaver
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 - 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
93% match
Loading thumbnail…

Coronavirus Line Chart w/ 1M Marker

This chart depicts the cumulative global death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A thin horizontal line marks the point where deaths reach one million, while a thick black path traces the rising trend. The visualization is built with React and D3 v6, using `scaleTime`, `scaleLinear`, and `line` to generate an SVG path. Data is loaded via `d3.csv` and processed by summing daily country-level death counts.

AAnthony Ynami
92% match