Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
KKonJoDot
Last edited Nov 5, 2022
Created on Nov 5, 2022

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

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

Fork of Coronavirus Line Chart with 1M marker line

This line chart tracks global cumulative COVID-19 deaths over time, using data from the CSSE at Johns Hopkins. It plots a bold black line and overlays a horizontal marker at the 1,000,000 death threshold, plus a vertical marker at the latest date labeled “now.” Built with React and D3 v7, it uses `scaleTime`, `scaleLinear`, and the `line` generator, rendering as SVG. The `YMarkerLine` and `XMarkerLine` components draw the reference lines and labels.

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