Skip to main content
SimilarExport ZIP
100%

Coronavirus Line Chart With Margin Convention

✓ Published1🌍 Public
CChris Briggs
Last edited Nov 19, 2021
Created on Nov 19, 2021

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.

AI-generated description

A line chart for John Hopkins Coronavirus Dataset with marker line at 1 million deaths.

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
94% match
Loading thumbnail…

Margin Convention Coronavirus Line Chart w/ 1M Marker

This line chart tracks global cumulative COVID-19 deaths over time using the Johns Hopkins dataset. It highlights the one-million-death milestone with a horizontal marker line and labels the most recent date with a vertical “now” marker. Built with React and D3 v6, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and custom SVG marker components. The viewport fills the browser window, and margins are explicitly set to position the visualization within the SVG.

AAnthony Ynami
93% match
Loading thumbnail…

Coronavirus Basic Line Chart With Margins

This example displays global COVID-19 death totals over time with a line chart, using a time-scaled x-axis and linear y-axis with margins. D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators construct the SVG path, while `YMarkerLine` and `XMarkerLine` components overlay reference lines at 5 million deaths and the most recent date, respectively. Data loads from the Johns Hopkins CSSE CSV via `d3.csv` and `timeParse`. The React app computes daily global sums and renders the chart full-screen.

KK3zter
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
93% 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
92% 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
92% match
Loading thumbnail…

Coronavirus Line Chart with D3 Axis

This chart visualizes global COVID-19 death totals over time using a line path, with a horizontal marker at the 1 million death threshold and a vertical marker at the most recent date. The React component uses D3 scales (scaleTime, scaleLinear) and a line generator to map the Johns Hopkins dataset, while custom XAxis and marker components render grid lines and labels. SVG output displays the path with a bold black stroke, styled tick marks, and formatted date labels.

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