Skip to main content
SimilarExport ZIP
100%

Corona Virus LineChart with Margin

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

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`.

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…

Corona Virus LineChart with Axes

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.

SShanmukh
92% match
Loading thumbnail…

Coronavirus Line Chart with Marker Line Margin Convention

This example shows the cumulative global COVID-19 death totals over time as a black line chart, with horizontal and vertical marker lines highlighting the one-million-death threshold and the most recent date. The visualization uses React components with ES6 modules, while D3 v5’s `scaleTime`, `scaleLinear`, and `line` APIs handle the data mapping and path generation. Data comes from the CSSE COVID-19 time series CSV, and the chart includes margin-based positioning for axes and markers in an SVG render.

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

Corona Virus LineChart with Labels

This visualization shows the global cumulative COVID-19 death toll over time using a line chart. It employs a logarithmic y-axis to display the exponential growth, with labeled axes and a marker line referencing the most recent date and six million deaths. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLog` to map data, `line` to generate the path, and `axisBottom`/`axisLeft` for the axes, drawing data from the CSSEGISandData COVID-19 GitHub repository.

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

Coronavirus Basic Line Chart With Margins

This example displays global COVID-19 death totals over time with a line chart, using a time-scaled x-axis and linear y-axis with margins. D3 v7’s `scaleTime`, `scaleLinear`, and `line` generators construct the SVG path, while `YMarkerLine` and `XMarkerLine` components overlay reference lines at 5 million deaths and the most recent date, respectively. Data loads from the Johns Hopkins CSSE CSV via `d3.csv` and `timeParse`. The React app computes daily global sums and renders the chart full-screen.

KK3zter
90% match