Fork of Corona Deaths Linechart with Marker Line with Margins

100%

Fork of Corona Deaths Linechart with Marker Line with Margins

✓ Published1🌍 Public

Last edited May 17, 2021

Created on May 17, 2021

Forked from Corona Deaths Linechart with Marker Line

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

Jj-PGi

93% match

Loading thumbnail…

Corona Deaths Linechart with Marker Line

The chart displays global cumulative COVID-19 deaths over time as a thick black line, with a red horizontal marker line fixed at 3 million deaths. Built using React and D3 v5, it renders an SVG path via `d3.line()` with time and linear scales (`scaleTime`, `scaleLinear`). The line’s y-coordinate is derived from the `deathTotal` field, which sums daily death counts from the JHU CSSE time-series CSV. The marker line’s position is computed using the same y-scale, and both elements are drawn directly in the JSX.

Nnexus1058

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

91% match

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

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

90% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart tracks cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The visualization highlights two reference markers: a horizontal line at 10,000 deaths and a vertical line at the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate the SVG path. Axes are rendered via `axisBottom`, with custom marker components drawing labeled guide lines.

RRoberto

90% match

Loading thumbnail…

Fork of Coronavirus Line Chart With 5,000,000 Marker Line

A line chart tracks global cumulative COVID-19 deaths over time from JHU CSSE time-series data, using d3.scaleTime and d3.scaleLinear. A horizontal YMarkerLine highlights the 5,000,000 death threshold, while an XMarkerLine marks the most recent date. The SVG path is generated with d3.line, rendered in React, and updated to the full viewport size.

TThomas Cormican

90% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

This line chart visualizes global cumulative coronavirus deaths over time, with a horizontal marker highlighting the 10,000-death threshold and a vertical marker indicating the most recent date. The chart loads data from the Johns Hopkins COVID-19 dataset using d3.csv, transforms it with timeParse and reduce, and renders via d3.scaleTime, scaleLinear, and line generators in an SVG. A React component structure manages the state, while d3.axisBottom and custom marker components add reference lines.

WWalkramis

90% match