Coronav deaths line chart 2 margin convention

100%

Coronav deaths line chart 2 margin convention

✓ Published1🌍 Public

Last edited Apr 20, 2021

Created on Apr 17, 2021

A line chart tracks cumulative global COVID-19 deaths over time, with horizontal reference lines at one, two, and three million deaths and a vertical "now" marker at the latest date. The chart uses React with D3 v6, employing `scaleTime`, `scaleLinear`, and `line` to map dates and death totals, with margins applied via an SVG `<g>` transform. Data comes from the CSSE COVID-19 time series CSV, processed with `csv` and `timeParse` to aggregate daily global totals.

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

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

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

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

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

90% match

Loading thumbnail…

Corona Virus LineChart with Margin

This example displays a global COVID-19 death toll line chart, highlighting the moment cumulative deaths reach six million with horizontal and vertical marker lines. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death counts, while `d3.line` generates the SVG path. Data is fetched and parsed from a CSV URL via `d3.csv` and `d3.timeParse`.

SShanmukh

90% match

Loading thumbnail…

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

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.

Ee-ines

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

89% match

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

89% match