Coronavirus Line Chart with D3 Axes

100%

Coronavirus Line Chart with D3 Axes

✓ Published1🌍 Public

Last edited May 6, 2021

Created on May 6, 2021

Forked from Fork of Coronavirus Line Chart with Marker Line

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.

AI-generated description

A Coronavirus Line Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Line Chart with D3 Axes

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.

CChris Briggs

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

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

95% match

Loading thumbnail…

Coronavirus Basic line Chart

This line chart visualizes global COVID-19 death totals over time, using a time-series dataset from the CSSE at Johns Hopkins. It plots a single black path generated with d3.line, with axes built via d3.axisBottom and scaleTime/scaleLinear. React manages the SVG rendering, while d3-selection updates the axis. Two marker lines highlight the current date and the six-million-death threshold, styled with CSS classes in the accompanying stylesheet.

Vvmonney

93% match

Loading thumbnail…

Coronavirus line chart - Linear Y Axis

A line chart displays cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins Coronavirus Dataset. The chart uses a linear y-axis scale (d3.scaleLinear) and a time-based x-axis (d3.scaleTime), with the line path generated via d3.line. React manages component state, while d3.axisBottom and d3.axisLeft render the axes with tick marks extending across the plot area. SVG elements draw the chart, styled with CSS for gridlines and the line stroke.

YYedrup

93% match

Loading thumbnail…

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

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.

BBen Brophy

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

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