Fork of Coronavrius Line Chart with marker line

100%

Fork of Coronavrius Line Chart with marker line

✓ Published1🌍 Public

Last edited Aug 5, 2021

Created on Aug 4, 2021

Forked from Coronavrius Line Chart with marker line

A COVID-19 line chart displays the global total of deaths over time using a React component with D3 v5 scales and path generators. The chart plots daily cumulative death counts from the CSSE time series dataset, with a horizontal marker line at 3,000,000 deaths and a vertical marker line at the most recent date labeled "Now." Both marker lines are implemented as React components using D3’s `scaleLinear` and `scaleTime` to position them within the SVG viewport. The line path is generated with `d3.line` and styled with CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of CORONAVIRUS LINE CHART

A line chart visualizes the global cumulative COVID-19 death toll over time, using a red background and a thick black line. The chart includes horizontal and vertical marker lines at the one million death threshold and at the latest date. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `line` generators, pulling data from the CSSEGISandData COVID-19 time-series CSV. The SVG rendering relies on React components for the marker lines and a `useData` hook for asynchronous CSV parsing and transformation.

Jjesramyep1263

93% match

Loading thumbnail…

Fork of CORONAVIRUS LINE CHART

This chart displays global COVID-19 death totals over time using a red SVG background and a thick black line. It uses `d3.scaleTime` and `d3.scaleLinear` to map dates and cumulative deaths, while `d3.line` generates the path. Two custom React components, `YMarkerLine` and `XMarkerLine`, draw reference lines at the 1,000,000 death mark and at the latest date, respectively. Data comes from the CSSE COVID-19 time series CSV loaded via `d3.csv`.

Jjesramyep1263

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

93% match

Loading thumbnail…

Coronavrius Line Chart with marker line

A line chart tracks cumulative global COVID-19 deaths over time, using a black marker line to highlight the point where the death toll reaches three million. The visualization loads time-series data from the Johns Hopkins CSSE repository via `d3.csv`, transforms dates with `d3.timeParse`, and renders an SVG path generated with `d3.line`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, while React manages the component state and updates the chart.

Jj-PGi

93% match

Loading thumbnail…

Fork of Corona Deaths Linechart with Marker Line with Margins

This D3.js v5 chart visualizes cumulative global COVID-19 deaths over time, sourced from the CSSE at Johns Hopkins. It renders an SVG line chart in React, featuring red marker lines for a threshold of 3,000,000 deaths and the most recent date. The chart uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `line` function to generate the path.

Nnexus1058

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

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

91% match

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

91% match