Pulling Live Coronavirus Data

100%

Pulling Live Coronavirus Data

✓ Published0🌍 Public

Last edited Apr 15, 2021

Created on Apr 15, 2021

This example shows the global cumulative death toll from COVID-19 over time as a single line chart with a logarithmic y-axis. It loads live data from the Johns Hopkins Coronavirus dataset via `d3.csv` and computes daily totals by summing country values. The chart is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, while `line` generates the path. SVG rendering with axis labels and gridlines is used, and the chart updates automatically when new data is fetched.

AI-generated description

Line chart of Coronavirus cases to date. Data from Johns Hopkins Coronavirus Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pulling Live Coronavirus Data

This example displays a line chart of global cumulative coronavirus deaths over time, using a logarithmic y-axis to accommodate the wide range of values. It loads live data from the Johns Hopkins COVID-19 dataset via `d3.csv`, parsing dates with `d3.timeParse`. The React components render SVG elements, with `d3.scaleTime` for the x-axis and `d3.scaleLog` for the y-axis. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while the line path is generated with `d3.line`. Gridlines and tick labels are styled via CSS in the embedded `<style>` block.

CCurran Kelleher

96% match

Loading thumbnail…

Global Live Coronavirus Deaths Over Time

A line chart visualizes global cumulative COVID-19 deaths over time using a logarithmic y-axis. The chart loads daily global death totals from a Johns Hopkins University CSV dataset, parses the data with `d3.csv` and `timeParse`, and renders an SVG line using `d3.line`, `scaleTime`, and `scaleLog`. Red strokes mark the trend, with gridlines and labeled axes generated by `axisBottom` and `axisLeft`. The React component updates as new data becomes available.

GGonzalo Montañés

92% match

Loading thumbnail…

Pulling Live Coronavirus Data

This example displays cumulative COVID-19 deaths over time, using a logarithmic y-axis to accommodate exponential growth. The React app fetches live data from the Johns Hopkins CSSE GitHub repository via `d3.csv`, then transforms it into date/death pairs. A `d3.line` generator with `scaleTime` and `scaleLog` renders the SVG path, while `axisBottom` and `axisLeft` produce gridlines with formatted tick labels. Unused `XMarkerLine` and `YMarkerLine` components show structural possibilities for annotations, though they are not invoked.

SSerind Joshua McCue

91% match

Loading thumbnail…

Coronavirus Line Chart

This line chart visualizes the cumulative global death toll from the Johns Hopkins Coronavirus Dataset over time. The chart uses D3 v6 with React to load CSV data, transform it into daily sums, and render an SVG path via `scaleTime`, `scaleLinear`, and the `line` generator. The resulting graphic shows a single bold black curve tracing the death count across the entire dataset from its start to the present.

WWolfgang

90% match

Loading thumbnail…

Coronavirus line chart

This chart shows the cumulative global death toll from COVID-19 over time, using a simple black line against a full-screen SVG. The data is loaded from the Johns Hopkins Coronavirus dataset and aggregated by day. It uses D3’s `scaleTime` and `scaleLinear` for the axes, a `line` generator for the path, and React to render the SVG element. The line is styled with a 5px stroke and no fill, emphasizing the overall curve of the pandemic’s mortality.

YYedrup

89% match

Loading thumbnail…

Covid-19 with live data

This visualization displays global Covid-19 death totals over time as a smooth, logarithmic line chart, with tooltips on hovered points and dashed marker lines at 10,000 deaths and the latest date. It loads live time-series data from the CSSE at Johns Hopkins via `d3.csv`, aggregates daily global totals, and renders with React components using `d3.scaleTime`, `d3.scaleLog`, `d3.line` with `curveNatural`, and SVG axes from `d3.axisBottom` and `d3.axisLeft`. The chart updates responsively to the browser window size.

Ssmile2git

89% match

Loading thumbnail…

Coronavirus Line Chart

A line chart tracks global cumulative COVID-19 deaths over time, using a logarithmic y-axis to show growth across multiple orders of magnitude. Built with React and D3 v6, it fetches live data from the Johns Hopkins CSSE GitHub repository via `d3.csv`. The chart renders as SVG, with scales created by `scaleTime` and `scaleLog`, axes via `axisBottom` and `axisLeft`, and a tomato-colored `MarkerY` annotation highlighting the 10,000-death threshold.

WWaseem Medhat

89% match

Loading thumbnail…

Coronavirus Log Y Axis

This example visualizes the global cumulative death toll from the Johns Hopkins Coronavirus Dataset using a line chart with a logarithmic y-axis. The chart displays total deaths over time, with marker lines highlighting the current date and the 4,000,000 death threshold. Built with React and D3 v7, it uses `scaleTime` and `scaleLog` to map dates and death counts, while the `line` generator creates the path and `axisBottom` and `axisLeft` render axes. Data is loaded via `csv` and parsed with `timeParse`.

KKtuzinowski

89% match