Skip to main content
SimilarExport ZIP
100%

Coronavirus Line Chart with D3 Axes

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

A line chart visualizes the cumulative global COVID-19 death toll over time using the John Hopkins Coronavirus Dataset. It plots daily death totals on a linear scale and dates on a time scale, with a red marker line highlighting the 1 million death milestone and an "now" marker at the most recent date. The chart is built with React and renders SVG paths using D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators, while axes are drawn declaratively via `axisBottom` and custom marker-line components. Grid lines are styled with CSS.

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

Coronavirus line chart - global deaths Axes useRef and D3

This line chart displays global cumulative COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The visualization employs d3.scaleTime and d3.scaleLinear to map dates and death totals, with d3.line generating the path. React components use useRef and useEffect to integrate D3 axes via d3.axisBottom, while custom XMarkerLine and YMarkerLine components annotate the most recent date and the 500,000-death threshold. SVG rendering fills the viewport, with gridlines and styled ticks enhancing readability.

YYedrup
93% match
Loading thumbnail…

Coronavirus Linear Y Axis

A line chart displaying cumulative global COVID-19 deaths over time, with a red marker line at the 1 million death threshold. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map dates and death totals, with `line()` generating the SVG path. Data comes from the John Hopkins Coronavirus dataset, aggregated by summing daily death totals across all countries. Gridlines from `axisBottom` and `axisLeft` provide reference, while the marker annotations label the 1M threshold and its corresponding date.

CChris Briggs
93% match
Loading thumbnail…

Coronavirus Linear Y Axis

A line chart displaying cumulative global COVID-19 deaths over time, with a red marker line at the 1 million death threshold. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map dates and death totals, with `line()` generating the SVG path. Data comes from the John Hopkins Coronavirus dataset, aggregated by summing daily death totals across all countries. Gridlines from `axisBottom` and `axisLeft` provide reference, while the marker annotations label the 1M threshold and its corresponding date.

CChris Briggs
93% match
Loading thumbnail…

CoronaVirus Line Chart with Axis

The chart shows the global cumulative death total from the COVID-19 pandemic over time, using a line path drawn with D3 v5’s `line` generator and scales from `scaleTime` and `scaleLinear`. Horizontal markers at 10,000, 100,000, 500,000, 1,000,000, and 2,000,000 deaths are rendered as rudimentary y-axis gridlines with labels, and the x-axis is built with `axisBottom` and custom tick sizing. Data comes from the Johns Hopkins University CSSE time series CSV, fetched via `d3.csv`, and the visualization is implemented as a React component rendering an SVG.

AAmir
93% match