Skip to main content
SimilarExport ZIP
100%

Coronavirus Basic Line Chart With 10,000 Marker Line

✓ Published2🌍 Public
CCurran Kelleher
Last edited Mar 21, 2020
Created on Mar 21, 2020

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.

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

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

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

A line chart tracks cumulative global COVID-19 deaths over time, with a horizontal marker line at 10,000 deaths. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators to map dates and death totals, rendering an SVG path with a thick black stroke. The marker line is drawn as a separate SVG `<line>` element, while the React component structure (via `useData`) loads the Johns Hopkins CSSE time-series CSV, aggregating daily death sums. The X-axis is delegated to a separate component using `d3.select`.

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

49) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks daily cumulative COVID-19 deaths worldwide, with a horizontal marker line fixed at 10,000 deaths. The React component uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death totals, while `d3.line` generates the SVG path. Data comes from a JHU CSSE time-series CSV, aggregated by summing country-level deaths per day. The black stroke emphasizes the trend, and the marker line offers a fixed reference threshold.

Llefat92
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