coronavirus Line Chart Practice

100%

coronavirus Line Chart Practice

✓ Published0🌍 Public

Last edited Jul 24, 2022

Created on Jul 23, 2022

This example shows the global cumulative death toll from COVID-19 over time as a single black line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the latest date. Built with React and D3 v5, it uses `d3.csv` to load time-series data from the CSSE COVID-19 dataset, `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the path. The SVG is rendered directly via React components, while `d3.axisBottom` and refs are used to draw the x-axis.

AI-generated description

Smiley face implementation with React & D3, taking full advantage of React components and ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Line Chart

The chart displays the cumulative global death toll from COVID-19 over time as a single black line, with a horizontal marker line indicating the 10,000-death threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and totals, while a `line` generator produces the SVG path. The data is fetched from the CSSE COVID-19 time series CSV, aggregated daily by summing deaths across all countries.

Ccynichole

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

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

94% match

Loading thumbnail…

Coronavirus Line Chart with 10,000 Marker Line

This visualization shows the cumulative global death toll from COVID-19 over time as a single black line chart, with a horizontal marker line highlighting the point at which 100,000 deaths were reached. The chart uses React to manage the SVG rendering, while D3 v6 functions like `scaleTime`, `scaleLinear`, `extent`, and `line` compute the scales and path geometry. The data is fetched live from the CSSEGISandData GitHub repository’s time-series CSV and aggregated by summing daily deaths across all countries. The full-viewport SVG is drawn with a stroke-width of 4 for the main path and a thinner line for the fixed threshold.

PPeter Krevenets

93% match

Loading thumbnail…

Corona Virus Line Chart

This line chart visualizes the cumulative death toll from COVID-19 over time, with a single black line tracing the global trend. A horizontal marker at 10,000 and a vertical marker at the latest date provide visual reference points. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, and a `line` generator to plot data from a CSSE GitHub CSV. The SVG rendering includes custom marker components for the annotations, and data is loaded asynchronously via `d3.csv`.

SSerind Joshua McCue

93% match

Loading thumbnail…

Coronavirus Basic Line Chart With 5,000,000 Marker Line

This chart shows the global cumulative COVID-19 death toll over time, rendered as a black line that climbs steadily across the full window. A horizontal marker line at 5,000,000 deaths highlights when the total crossed that threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and death totals, while `line()` generates the SVG path from data fetched from the CSSE COVID-19 time series. The marker line is a simple SVG `<line>` positioned via the y-scale.

KK3zter

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

92% match

Loading thumbnail…

Basic Coronavirus Line Chart

This chart shows the global cumulative death total from COVID-19 over time, using a single black line that rises across the viewport. The line is generated with `d3.line()` and scaled using `d3.scaleTime()` for dates and `d3.scaleLinear()` for death counts. Data comes from the CSSE COVID-19 time series CSV, aggregated by summing daily country reports. Rendering is done through React with an SVG `<path>` element, styled with a 10-pixel stroke.

OOleg Zhernovoy

92% match