Skip to main content
SimilarExport ZIP
100%

Covid-19 with Marker Lines

✓ Published1🌍 Public
Uuplusv
Last edited Oct 6, 2023
Created on Oct 4, 2023

This example visualizes global COVID-19 death counts over time as a line chart, with marker lines highlighting the latest date on the x-axis and the 500 million death threshold on the y-axis. The chart is built using React and renders SVG elements directly. It loads data from a CSV file using `d3.csv` and applies `d3.scaleTime` and `d3.scaleLinear` for scaling. Custom `XMarkerLine` and `YMarkerLine` components, using `d3.timeFormat` and `d3.format`, add annotated guide lines, while the x-axis uses `d3.axisBottom` for ticks and grid lines.

AI-generated description

A program that loads and parses some CSV data: CSS Named Colors.

See also:

MIT Licensed

Similar vizzes

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

Line Chart With Marker Lines and D3 Axes

This example visualizes global COVID-19 deaths over time as a line chart, with a horizontal marker line at six million deaths and a vertical marker at the most recent date. The chart uses React components wrapping D3 scales and axes, including `scaleTime`, `scaleLinear`, and `axisBottom` for gridlines. Data is loaded from a CSV file and aggregated by day from the CSSE COVID-19 dataset. Rendering uses SVG paths generated by D3's `line` generator.

OOleg Zhernovoy
90% 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
90% 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
89% match
Loading thumbnail…

Coronavirus Line Chart with Marker Lines Part II

This chart displays cumulative global COVID-19 deaths over time as a line path, with marker lines highlighting the one million death threshold and the current date (“Now”). The code uses d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG path from the Johns Hopkins Coronavirus Dataset, which is loaded via d3.csv. React manages the component state, while custom XMarkerLine and YMarkerLine components draw the annotated reference lines.

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

50) Coronavirus Line Chart with 10,000 Marker Line

A line chart tracks the cumulative global count of COVID-19 deaths over time, with a prominent horizontal marker line at 10,000 deaths and a vertical “Now” marker at the most recent date. React components use D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` to generate the SVG path, pulling data from a raw GitHub CSV via `d3.csv`. Custom `YMarkerLine` and `XMarkerLine` components draw the reference lines and labels.

Llefat92
89% 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
89% match