Coronavrius Line Chart with marker line

100%

Coronavrius Line Chart with marker line

✓ Published1🌍 Public

Last edited Aug 4, 2021

Created on Aug 3, 2021

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.

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…

Coronavirus Line Chart with Marker Lines Part I

This line chart displays global cumulative COVID-19 deaths over time from the Johns Hopkins dataset, with a horizontal marker line at the one-million-death threshold. The React component uses D3 v6 functions `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` to construct an SVG path. Data loading relies on `csv` and `timeParse` to transform daily country-level death counts into aggregated totals. The marker line is drawn as an SVG `<line>` element, while the path is unstyled except for a black stroke defined in the page’s CSS.

WWolfgang

92% match

Loading thumbnail…

Coronavirus Line Chart with Marker Line

A line chart visualizes the global cumulative total of COVID-19 deaths over time, with a horizontal marker line positioned at one million deaths. The chart uses React to render an SVG, with scales and line generation handled by d3.scaleTime, d3.scaleLinear, and d3.line. The data comes from a CSV file provided by the COVID-19 Data Repository at Johns Hopkins University, loaded via d3.csv and transformed by grouping daily death totals.

Ffjvoris

92% match

Loading thumbnail…

Coronavirus Line Chart With 3,000,000 Marker Line

The chart displays global COVID-19 death totals over time as a black line, with horizontal and vertical dashed markers indicating the 3,000,000 death threshold and the current date. Built with React and d3.scaleTime, d3.scaleLinear, and d3.line, it renders an SVG path from data fetched via d3.csv from the Johns Hopkins CSSE repository. The YMarkerLine and XMarkerLine components draw labeled annotations, while the text elements use SVG alignment attributes to position labels. The visualization updates dynamically as new data becomes available in the source CSV.

Wwindwaver

91% match

Loading thumbnail…

Coronav deaths line chart

This chart displays the total global COVID-19 deaths over time as a single black line rising across a white SVG canvas, with a teal horizontal marker line fixed at the one-million death threshold. The React component uses d3’s `scaleTime`, `scaleLinear`, and `line` generator to map dates and cumulative death totals from the CSSE COVID-19 time series dataset (a CSV loaded via d3.csv). The marker line’s position is computed with `yScale(1000000)`, while the path is rendered directly to SVG coordinates.

Ssurikmeetr

91% match

Loading thumbnail…

Coronavirus Line Chart with Marker Line

This line chart displays the global cumulative COVID-19 death toll over time from the Johns Hopkins dataset, with a vertical marker line at the current date and a horizontal marker line at the one-million-death threshold. The visualization uses React to render an SVG path generated by d3.line, with d3.scaleTime and d3.scaleLinear mapping dates and death totals. Marker lines are drawn as separate React components (XMarkerLine, YMarkerLine) using d3 scales for positioning, while the data is loaded and parsed via d3.csv.

KKtuzinowski

91% match

Loading thumbnail…

Coronavirus Line Chart

A line chart tracks cumulative global COVID-19 deaths over time, using a black, five-pixel-wide path scaled to the full window. A horizontal marker at four million deaths and a vertical “now” marker at the latest date highlight key thresholds. The visualization is built with React components and D3 v7, using `scaleTime`, `scaleLinear`, and `line` for the path, plus `axisBottom` and `axisLeft` for gridlines. Data comes from a CSV of Johns Hopkins global death counts, aggregated by day and rendered as SVG.

AAlex Stulov

91% match

Loading thumbnail…

CoronaVirus Line Chart

A line chart displays the cumulative global death toll from COVID-19 over time, based on data from the CSSE at Johns Hopkins University. The chart marks the most recent date with a vertical “now” line and highlights thresholds at one and two million deaths with horizontal reference lines. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the SVG path from a dataset transformed from CSV by summing daily death totals across all countries.

33ssalunke

91% match