Skip to main content
SimilarExport ZIP
100%

Corona Virus LineChart with Axes

✓ Published1🌍 Public
SShanmukh
Last edited May 22, 2024
Created on May 22, 2024

This interactive chart displays global COVID-19 deaths over time using a single black line path, with horizontal and vertical marker lines highlighting the six-million-death milestone and the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` from d3-shape to generate the SVG path, while `axisBottom` renders the time axis. The data comes from the CSSEGISandData COVID-19 GitHub repository and is aggregated daily. The chart dynamically updates to fill the browser window, with subtle gray gridlines and labeled annotations.

AI-generated description

Smiley face implementation with React & D3, using a React component.

MIT Licensed

Similar vizzes

Loading thumbnail…

Corona Virus LineChart

This example shows the global total COVID-19 deaths over time as a single black line chart, with a horizontal marker line at six million deaths. The data comes from the CSSE COVID-19 time series CSV, aggregated daily across all countries. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to map dates and death totals to SVG coordinates, while the marker line is drawn with a simple SVG `<line>` element at a fixed y-value.

SShanmukh
94% 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
Loading thumbnail…

Corona Virus Line Chart (React + D3 Axis)

This example visualizes the global cumulative death toll from COVID-19 over time as a single grey line chart. The visualization combines a React app for layout and component composition with D3 v5 utilities for scales and axis rendering. Data is fetched from a CSV maintained by the CSSE at Johns Hopkins, aggregated globally per day, with D3’s `csv` and `timeParse` handling ingestion. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, `line` for the path, and `axisBottom` for the x-axis, while custom marker lines highlight the 5-million-death threshold and the final date.

KKazushige Okuma
92% match
Loading thumbnail…

CoronaVirus Line Chart

A line chart displays the cumulative global death toll from COVID-19 over time, based on data from the CSSE at Johns Hopkins University. The chart marks the most recent date with a vertical “now” line and highlights thresholds at one and two million deaths with horizontal reference lines. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the SVG path from a dataset transformed from CSV by summing daily death totals across all countries.

33ssalunke
92% match
Loading thumbnail…

Corona Virus LineChart with Margin

This example displays a global COVID-19 death toll line chart, highlighting the moment cumulative deaths reach six million with horizontal and vertical marker lines. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death counts, while `d3.line` generates the SVG path. Data is fetched and parsed from a CSV URL via `d3.csv` and `d3.timeParse`.

SShanmukh
92% match
Loading thumbnail…

Corona Virus LineChart with LogScale

This chart displays the global cumulative death toll from COVID-19 over time, using a line plot with a log-scaled Y-axis to better reveal the exponential growth trend. The visualization is built with React and D3 v5, where D3’s `scaleTime` and `scaleLinear` handle the axes, and the `line` generator traces the path. Data is loaded from the CSSE COVID-19 time series CSV, aggregated by day, and rendered as an SVG within a React component, with marker lines highlighting the current date and a death count of six million.

SShanmukh
92% match
Loading thumbnail…

CoronaVirus Line Chart

This visualization displays the global cumulative death toll from COVID-19 over time as a single black line chart. It uses a React component with D3 v5 scales (`scaleTime`, `scaleLinear`) and a `line` generator to plot data from the JHU CSSE COVID-19 time series dataset. Dashed horizontal markers label key thresholds (10,000 to 2,000,000 deaths) via a custom `YMarkerLine` component, which draws SVG `<line>` elements and formatted text labels. The chart fills the browser window and updates when new data is loaded.

AAmir
92% match
Loading thumbnail…

Corona Virus Line Chart

This line chart visualizes the cumulative death toll from COVID-19 over time, with a single black line tracing the global trend. A horizontal marker at 10,000 and a vertical marker at the latest date provide visual reference points. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, and a `line` generator to plot data from a CSSE GitHub CSV. The SVG rendering includes custom marker components for the annotations, and data is loaded asynchronously via `d3.csv`.

SSerind Joshua McCue
92% match