Coronavirus Line Chart with 3,000,000 Marker Line and Margin Convention

100%

Coronavirus Line Chart with 3,000,000 Marker Line and Margin Convention

✓ Published1🌍 Public

Last edited May 3, 2021

Created on Apr 27, 2021

This chart shows the global cumulative death toll from COVID-19 over time, highlighting the moment it reaches three million with a red horizontal marker line and a labeled "now" vertical marker at the most recent date. The line path is generated with `d3.line`, using `scaleTime` and `scaleLinear` for axes, and rendered as SVG within a React component. Data is fetched from the CSSE COVID-19 time series CSV via `d3.csv`, while the margin convention is applied by translating the main group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Line Chart with Marker Line Margin Convention

This example shows the cumulative global COVID-19 death totals over time as a black line chart, with horizontal and vertical marker lines highlighting the one-million-death threshold and the most recent date. The visualization uses React components with ES6 modules, while D3 v5’s `scaleTime`, `scaleLinear`, and `line` APIs handle the data mapping and path generation. Data comes from the CSSE COVID-19 time series CSV, and the chart includes margin-based positioning for axes and markers in an SVG render.

Ffjvoris

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

93% match

Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 line Margin Convention

This example shows the global cumulative death toll from COVID-19 over time, plotted as a basic line chart with two prominent marker lines. A horizontal line at the 1,000,000 death mark and a vertical line at the most recent date provide reference points against the black trend line. The chart uses React and D3 v6, leveraging `scaleTime` and `scaleLinear` for axes, `line()` for the path generator, and data from the CSSEGISandData COVID-19 GitHub repository. The visualization is rendered as an SVG, filling the entire browser window.

AAndre J Denais

92% match

Loading thumbnail…

Coronavirus Line Chart With Margin Convention

A line chart tracks cumulative global COVID-19 deaths over time using the Johns Hopkins dataset, with a red horizontal marker at one million deaths and a vertical “now” marker at the most recent date. The React component builds a time-scaled `d3.line` path within an SVG, applying explicit margin offsets to position axes. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.extent`, and `d3.max` to map data, while custom `XMarkerLine` and `YMarkerLine` components place annotation lines and labels.

CChris Briggs

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

91% match

Loading thumbnail…

Coronavirus Line Chart with Marker Line

This visualization displays global COVID-19 death totals over time as a single bold line, with a horizontal marker line highlighting the one-million-death threshold. The React component uses d3.scaleTime and d3.scaleLinear to map dates and cumulative deaths to SVG coordinates, while d3.line generates the path. Data comes from the CSSEGISandData COVID-19 time-series CSV, loaded via d3.csv and aggregated daily. The marker line is a static SVG `<line>` positioned using the y-scale’s output for one million deaths.

RRMartins11

91% match

Loading thumbnail…

Coronavirus Line Chart with 1M marker line

This chart shows the global cumulative COVID-19 death toll over time, with a horizontal marker line at the one-million-death threshold. The line chart uses d3.scaleTime for dates, d3.scaleLinear for deaths, and d3.line to generate the path. A horizontal `line` element is positioned using the y-scale’s value for 1,000,000. Data comes from the CSSE COVID-19 time series CSV, aggregated daily across all countries, and renders as an SVG in a React component.

KKevin McMorrow

91% match

Loading thumbnail…

Coronavirus Line Chart With 5,000,000 Marker Line

A line chart displays worldwide cumulative COVID-19 deaths over time, with a horizontal marker line highlighting the 5,000,000 death milestone. The chart uses a React component with D3’s `scaleTime`, `scaleLinear`, and `line` generator to map dates and death totals to SVG coordinates. The marker line is positioned using `yScale(5000000)`. Data comes from the CSSEGISandData COVID-19 time series CSV, aggregated by summing daily global deaths. The SVG renders the trend as a black stroke and the threshold as a thinner line, filling the browser viewport.

TThomas Cormican

90% match