Coronavirus Line Chart with Marker Line Margin Convention

100%

Coronavirus Line Chart with Marker Line Margin Convention

✓ Published1🌍 Public

Last edited Mar 11, 2023

Created on Mar 11, 2023

Forked from Coronavirus Line Chart with Marker Line

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.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

91% match