Skip to main content
SimilarExport ZIP
100%

CORONA Live chart React + d3 axes

✓ Published1🌍 Public
KKolezhannochka
Last edited Feb 7, 2022
Created on Feb 7, 2022
Forked from CORONA Live chart

This chart shows the global cumulative number of COVID-19 deaths over time, with the line rising sharply as the pandemic progresses. The visualization uses React components for structure and D3 v5 scales, axes, and line generator for the SVG rendering. A horizontal marker line highlights the one-million-death threshold, while a vertical marker indicates the latest date. Data comes from a CSSE time-series CSV, which is fetched and aggregated using d3.csv and d3.timeParse. Custom XAxis and marker components leverage d3.axisBottom and React refs for drawing gridlines.

AI-generated description

Smiley face implementation with React & D3, taking full advantage of React components and ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

CORONA Live chart

The CORONA Live chart displays the cumulative global death toll from COVID-19 over time as a single black line, with a horizontal marker at one million deaths and a vertical marker at the latest date. It renders as an SVG using React components and D3 v5 scales (`scaleTime`, `scaleLinear`) and a `line` generator. Data is loaded via `d3.csv` from the Johns Hopkins CSSE time-series dataset, aggregated daily by summing death counts across all countries.

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

React + D3 axis (Coronavirus Deaths)

This example shows a line chart of cumulative global coronavirus deaths over time, drawn with D3 scales and a React-generated SVG. The chart highlights the most recent date with a vertical marker line labeled “now” and a horizontal reference line at 3,000,000 deaths. React components manage the SVG structure, while D3’s `scaleTime`, `scaleLinear`, and `line` generator compute positions and the path. Axes are rendered using `d3.axisBottom` within a React effect. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`.

Ee-ines
90% 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
90% match