Coronavirus Line Chart (codeAlong)

100%

Coronavirus Line Chart (codeAlong)

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

This example tracks cumulative COVID-19 deaths over time using a line chart, loading data from a GitHub-hosted CSV via `d3.csv`. The React app initially renders a loading state and then displays the dataset. It uses React hooks (`useState`, `useEffect`) in `useData.js` to fetch and store the data, while `d3` handles parsing. The visualization is built to follow a YouTube tutorial, with the current code showing only a basic app shell that logs the fetched data to the console, leaving chart rendering for later steps.

AI-generated description

Follow along with tutorial.

tutorial

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Coronavirus Data

A line chart displays global cumulative COVID-19 deaths over time, sourced from a GitHub CSV of Johns Hopkins data. The React app loads and parses the CSV with `d3.csv`, resamples the timeline with `d3.timeParse`, and renders an SVG via React components. Axes and grid lines are built with `d3.axisBottom` and `d3.axisLeft`, while marker lines annotate the 10,000-death threshold and the most recent date.

TTatyana Milanova

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

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

85% match

Loading thumbnail…

Coronavirus Basic Line Chart

This example displays a basic line chart showing COVID-19 data, with a text summary of the loaded dataset printed above the visualization. The chart renders using D3 v7’s `csv` loader to fetch data from a GitHub Gist, while React manages the component state and asynchronous data loading. The `message` function calculates and displays the dataset’s size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization itself is minimal, focusing on the data summary rather than a graphical line plot, and runs within a React 16.9 application using `ReactDOM.render`.

OOleg Zhernovoy

84% match

Loading thumbnail…

Fork of Coronavirus Line Chart

A line chart displays global cumulative COVID-19 deaths over time using a log-scaled y-axis to accommodate exponential growth. The visualization marks the 10,000-death threshold with a tomato-colored reference line. Data comes from the CSSEGISandData COVID-19 time-series dataset, loaded via `d3.csv` and transformed with reactive React state. React components render the SVG, while D3 v6 functions `scaleTime`, `scaleLog`, `line`, `axisBottom`, and `axisLeft` generate the axes, path, and gridlines.

NNelly-ux10

84% match

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

84% match

Loading thumbnail…

coronavirus line chart

This visualization displays the total number of coronavirus deaths worldwide as a single numeric readout, updated to the dataset’s most recent date column. It uses React with a custom `useData` hook that loads the Johns Hopkins CSSE time-series CSV via `d3.csv`, then sums the last column’s values across all countries. The total is formatted with `d3.format` (the `format(",")` comma formatter) and rendered inside a React component. While called a “line chart,” the code only presents the cumulative death toll as a message, not an actual line graph.

BBlake McCarty

83% match

Loading thumbnail…

coronavirus line

This line chart visualizes global COVID-19 deaths over time as a single increasing curve. The data comes from the CSSE at Johns Hopkins, aggregated from all countries on each date. Built with React and D3 v6, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and renders the line as an SVG path. The chart loads CSV data asynchronously via `d3.csv` and transforms it using `timeParse`.

JJonas Carvalho

83% match