Skip to main content
SimilarExport ZIP
100%

Coronavirus Basic Line Chart With 10,000 Marker Line

✓ Published0🌍 Public
Zzhangwbhi
Last edited Sep 11, 2021
Created on Sep 11, 2021

This line chart displays the global cumulative death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal marker line at 10,000 deaths highlights the threshold, with a labeled “10,000” text at the left edge. The visualization is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the SVG path and axes. The marker line is drawn as a separate SVG `<line>` element, with the y-coordinate computed via the linear scale.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Basic Line Chart With 10,000 Marker Line

This example visualizes the global cumulative COVID-19 death toll over time, with a horizontal marker line at the 10,000-death threshold. The line chart uses React and D3 v5, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the SVG path. Data is fetched as CSV from the CSSEGISandData COVID-19 repository and transformed with `d3.csv` and `d3.timeParse`. The marker line is drawn as an SVG `<line>` element at the y-axis position corresponding to 10,000 deaths, highlighting the pandemic's early growth milestone.

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

Coronavirus Basic Line Chart With 10,000 Marker Line

This chart shows the total number of COVID-19 deaths over time as a single black line, with a horizontal reference line marking the 10,000-death threshold and a label for that value. Built with React and D3 v5, the code uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to generate the path, and `d3.extent`, `d3.max`, and `d3.csv` to fetch and parse the Johns Hopkins time-series dataset. The SVG rendering uses a `<path>` element for the line and a `<line>` for the marker, with styling applied through CSS.

CCurran Kelleher
95% match
Loading thumbnail…

Coronavirus Line Chart with 10,000 Marker Line

This visualization shows the cumulative global death toll from COVID-19 over time as a single black line chart, with a horizontal marker line highlighting the point at which 100,000 deaths were reached. The chart uses React to manage the SVG rendering, while D3 v6 functions like `scaleTime`, `scaleLinear`, `extent`, and `line` compute the scales and path geometry. The data is fetched live from the CSSEGISandData GitHub repository’s time-series CSV and aggregated by summing daily deaths across all countries. The full-viewport SVG is drawn with a stroke-width of 4 for the main path and a thinner line for the fixed threshold.

PPeter Krevenets
95% match
Loading thumbnail…

Coronavirus Basic Line Chart With 5,000,000 Marker Line

This chart shows the global cumulative COVID-19 death toll over time, rendered as a black line that climbs steadily across the full window. A horizontal marker line at 5,000,000 deaths highlights when the total crossed that threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and death totals, while `line()` generates the SVG path from data fetched from the CSSE COVID-19 time series. The marker line is a simple SVG `<line>` positioned via the y-scale.

KK3zter
94% match
Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 Marker Line

This line chart displays the cumulative global death toll from COVID-19 over time. A horizontal marker line at 1,000,000 deaths and a vertical marker at the most recent date highlight key thresholds. The chart uses D3’s `scaleTime`, `scaleLinear`, and `line` to generate the SVG path from the CSSE COVID-19 time-series data, while React renders the visual and the custom `YMarkerLine` and `XMarkerLine` components draw the annotations.

BBen Brophy
94% match
Loading thumbnail…

Fork of Coronavirus Basic Line Chart With 10,000 Marker Line

This chart displays the cumulative global death toll from COVID-19 over time as a single black line, with a horizontal marker line at the 10,000-death threshold. The visualization uses React to render an SVG containing a `d3.line` path and a static `<line>` element. Data is loaded from a CSSEGISandData GitHub CSV using `d3.csv` and aggregated by day via `timeParse` and array reduction. The chart updates its scales dynamically using `d3.scaleTime` and `d3.scaleLinear` based on the extent and maximum of the dataset.

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