Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep49 - 40. Corona virus Line Chart - Preliminary

✓ Published1🌍 Public
MMinwoo Pak
Last edited Aug 2, 2021
Created on Jul 30, 2021

This example shows a line chart tracking global cumulative COVID-19 deaths over time, with a horizontal marker line at three million deaths. The React component uses d3.scaleTime and d3.scaleLinear for axes, while d3.line generates the path from CSV data. Data originates from the Johns Hopkins CSSE COVID-19 time series, fetched via d3.csv and aggregated by summing daily country values in useData.js. The SVG rendering applies a thick black stroke via CSS, with a fixed viewport sized to the browser window.

AI-generated description

Dataviz 2020_Ep10 - 6. Face Part 6 - Compartmentalizing Complexity

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2020_Ep50 - 41. Corona virus Line Chart

This visualization tracks global cumulative COVID-19 deaths over time as a line chart, using a time scale for dates and a linear scale for death totals. It highlights the most recent date with a vertical marker labeled “Now” and a horizontal reference line at 3.5 million deaths. Built with React and D3 v6 (d3.scaleTime, d3.scaleLinear, d3.line), it renders to SVG and loads data from the CSSE COVID-19 time series CSV, aggregating daily death counts across all countries.

MMinwoo Pak
95% match
Loading thumbnail…

Dataviz 2020_Ep51 - 42. Coronavirus Line Chart - React and D3 Axes

This example shows the global cumulative COVID-19 death toll over time as a single black line chart, with a horizontal marker at 3.5 million deaths and a vertical “Now” marker at the most recent date. It uses React to render the SVG and D3 v6 scales (`scaleTime`, `scaleLinear`) and line generator (`line`) to plot the data, while custom `XAxis` and marker components handle axes and annotations. The data comes from the CSSEGISandData COVID-19 time series CSV, loaded and transformed with D3’s `csv` and `timeParse`.

MMinwoo Pak
93% match
Loading thumbnail…

Corona Virus Line Chart

A line chart tracks cumulative COVID-19 deaths over time, using a time-scaled x-axis and linear y-axis. The React component `LineChart` builds an SVG path via `d3.line`, `scaleTime`, and `scaleLinear`, while `useData` fetches the Johns Hopkins CSSE global deaths CSV and aggregates daily totals. The black, 15-pixel-wide stroke renders the full dataset at window dimensions.

MMichael Bergerson
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…

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

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

Dataviz 2020_Ep52 - 43. Coronavirus Line Chart - Linear Y Axis

This visualization tracks global cumulative COVID-19 deaths over time as a single black line chart with a linear y-axis. The D3 line generator builds the path from daily date and death-total values processed from the CSSE COVID-19 time series dataset. React components render SVG axes with D3’s axisBottom and axisLeft, while scales use scaleTime and scaleLinear to map data to screen coordinates. Gridlines and tick marks provide reference points across the full chart area.

MMinwoo Pak
91% 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
91% match