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

100%

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

✓ Published0🌍 Public

Last edited Nov 7, 2022

Created on Nov 7, 2022

Forked from Coronavirus Basic Line Chart With 10,000 Marker Line

A line chart tracks the daily cumulative global COVID-19 death toll over time, with a horizontal marker line highlighting the 10,000-death threshold. The visualization uses React to render an SVG, employing D3 v5 scales and the `d3.line` path generator for the trend line, and a simple SVG `<line>` element for the marker. Data is loaded as CSV from the Johns Hopkins CSSE repository, transformed with `d3.csv` and `d3.timeParse`, and the chart fills the browser viewport.

AI-generated description

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

Fork of Coronavirus Line Chart with 10,000 Marker Line

This line chart depicts the global cumulative death toll from COVID-19 over time, with a horizontal marker line at 10,000 deaths and a vertical marker at the most recent date. It uses React and D3 v5’s `scaleTime`, `scaleLinear`, and `line` to generate an SVG path from data fetched via `d3.csv` from the CSSEGISandData GitHub repository. The chart renders a single thick black line, with the marker lines and text labels styled via CSS.

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

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

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

92% match

Loading thumbnail…

Fork of Coronavirus Line Chart with Marker Line

A line chart visualizes the global cumulative COVID-19 death total over time, with a vertical marker line at the most recent date and a horizontal marker line at the one-million-death threshold. The chart uses React and D3 v5 (including `scaleTime`, `scaleLinear`, and `line`) to render an SVG path from CSV data sourced from the COVID-19 Data Repository. Marker lines are drawn as SVG elements via custom components, and the chart updates with the latest available daily data.

RRMartins11

92% match

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

92% match