Skip to main content
SimilarExport ZIP
100%

Coronavirus Basic Line Chart with 1,000,000 Marker Line with React + d3 axes

✓ Published1🌍 Public
BBen Brophy
Last edited Jan 7, 2022
Created on Jan 7, 2022

This example shows the global death toll from COVID-19 as a line chart over time, with a horizontal marker at one million deaths and a vertical marker at the most recent date. The chart uses d3.scaleTime and d3.scaleLinear to map dates and death totals to SVG coordinates, while d3.line generates the path. React components wrap the axes, created with d3.axisBottom, and custom marker lines highlight key thresholds. Data is loaded from the CSSE COVID-19 time series CSV and aggregated by summing daily totals across all countries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 Marker Line

This line chart displays the cumulative global death toll from COVID-19 over time. A horizontal marker line at 1,000,000 deaths and a vertical marker at the most recent date highlight key thresholds. The chart uses D3’s `scaleTime`, `scaleLinear`, and `line` to generate the SVG path from the CSSE COVID-19 time-series data, while React renders the visual and the custom `YMarkerLine` and `XMarkerLine` components draw the annotations.

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

Coronavirus Line Chart with D3 Axes

A line chart displays global cumulative COVID-19 deaths over time, sourced from the CSSE at Johns Hopkins. The React component renders an SVG path generated with d3.line and scales using d3.scaleTime and d3.scaleLinear. Horizontal and vertical marker lines indicate the one-million deaths threshold and the most recent date, labeled "now". Custom axes use d3.axisBottom with tick marks extending across the chart, while CSS styles the path and gridlines.

RRMartins11
93% match
Loading thumbnail…

Coronavirus Basic Line Chart with 1,000,000 line

This example displays cumulative global COVID-19 death totals as a simple black line chart, with a horizontal marker indicating the one-million-death threshold. The React component uses d3.scaleTime and d3.scaleLinear to map dates and counts, while d3.line generates the SVG path from the Johns Hopkins CSSE time-series dataset. A static `<line>` element highlights the million-death milestone.

AAndre J Denais
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 1,000,000 line React + D3 Axis

This chart tracks cumulative COVID-19 deaths worldwide over time, using a single bold red line to show the total rising toward one million. The visualization combines React components with D3 scales and axes, including a horizontal marker line at the 1,000,000-death threshold and a vertical “now” marker at the most recent date. Data comes from the Johns Hopkins CSSE time-series CSV, transformed by d3.csv and d3.timeParse, while d3.axisBottom renders the time axis with grid lines.

AAndre J Denais
92% 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
92% 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