Coronavirus Line Chart With 3,000,000 Marker Line

100%

Coronavirus Line Chart With 3,000,000 Marker Line

✓ Published1🌍 Public

Last edited Apr 15, 2021

Created on Apr 13, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% 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 10,000 Marker Line

A line chart shows the global cumulative death toll from COVID-19 over time, with a horizontal marker line highlighting the threshold of 10,000 deaths. The chart uses D3 v5's `scaleTime`, `scaleLinear`, and `line` to generate the path, while React renders the SVG. The X axis maps dates parsed with `timeParse`, and the Y axis deaths from the CSSE global time-series CSV. Styling uses black strokes, with the marker line drawn as a separate SVG `<line>` element. The visualization waits for the remote data to load before drawing.

MMichael Bruno

93% match

Loading thumbnail…

Coronavirus Line Chart With 5,000,000 Marker Line

A coronavirus line chart tracks cumulative global deaths over time, with a horizontal marker line highlighting the 5,000,000-death threshold. The SVG visualization uses React to render a black path generated by d3.line, scaled with d3.scaleTime and d3.scaleLinear. Data comes from the CSSE COVID-19 time series CSV, aggregated daily via d3.csv and timeParse. The marker line is explicitly positioned using the y-scale’s output for 5,000,000, emphasizing the milestone against the full death-total trajectory.

OOleg Zhernovoy

93% match

Loading thumbnail…

Coronavirus Line Chart With 5,000,000 Marker Line

A line chart displays worldwide cumulative COVID-19 deaths over time, with a horizontal marker line highlighting the 5,000,000 death milestone. The chart uses a React component with D3’s `scaleTime`, `scaleLinear`, and `line` generator to map dates and death totals to SVG coordinates. The marker line is positioned using `yScale(5000000)`. Data comes from the CSSEGISandData COVID-19 time series CSV, aggregated by summing daily global deaths. The SVG renders the trend as a black stroke and the threshold as a thinner line, filling the browser viewport.

TThomas Cormican

93% match

Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part II

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.

WWolfgang

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

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

93% match