49) Coronavirus Line Chart with 10,000 Marker Line

100%

49) Coronavirus Line Chart with 10,000 Marker Line

✓ Published1🌍 Public

Last edited Aug 24, 2023

Created on Aug 23, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

50) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks the cumulative global count of COVID-19 deaths over time, with a prominent horizontal marker line at 10,000 deaths and a vertical “Now” marker at the most recent date. React components use D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` to generate the SVG path, pulling data from a raw GitHub CSV via `d3.csv`. Custom `YMarkerLine` and `XMarkerLine` components draw the reference lines and labels.

Llefat92

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

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

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

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

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

93% match