Covid-19 Cases Analysis

100%

Covid-19 Cases Analysis

✓ Published0🌍 Public

Last edited Jul 26, 2023

Created on Jul 25, 2023

This interactive narrative visualization analyzes U.S. COVID-19 case trends across multiple scenes, beginning with a line chart of total confirmed cases from January to May 2020, followed by state-level comparisons and a geographic distribution map. The first scene uses D3 v7 with `d3.select`, `d3.csv`, `d3.timeParse`, and `d3.line` to render an SVG line chart, plotting dates against confirmed case counts from a public COVID-19 dataset. The visualization employs a slideshow navigation format with interactive elements for exploring different data aspects.

AI-generated description

A demonstration of how to start using D3 version 6.

COVID-19 vaccination rates in blue versus reported cases in gray.

Data are from CDC COVID-19 US population vaccination counts as proportions of the US population size and the NYT COVID-19 infection 7-day trailing average cases counts for the US population using a dual y-axis for the two public use data sets.

Credits: *reusable scatter plot inspired by

Towards Reusable Charts

Observable: selection.join

Curran Kelleher Reusable D3 Scatter Plot B&W*

MIT Licensed

Similar vizzes

Loading thumbnail…

Covid-19 Cases Analysis

This interactive narrative visualization analyzes U.S. COVID-19 cases across three scenes. It shows total case trends per day, state-level comparisons, and case distribution on a map. The line charts use d3.line and d3.scaleTime to plot confirmed and death cases, with interactive navigation between scenes via HTML links. Data is loaded from external CSV files using d3.csv, and rendered as SVG elements. The visualization employs a slideshow structure with drill-down capabilities, allowing exploration of trends over time from January to May 2020.

Xxiaojingwu138

97% match

Loading thumbnail…

Covid-19 Cases from 2020 to 2023

A line chart tracks daily Covid-19 cases in the United States from 2020 to 2023, using data from the New York Times GitHub repository. The visualization, built with D3 v7 and SVG, employs `d3.scaleTime` and `d3.scaleLinear` to map dates and case counts, with `d3.line` generating the trend curve. Axes are formatted with quarterly month ticks and abbreviated counts, while gridlines and labeled axes clarify the temporal and numerical scales.

Xxiaojingwu138

83% match

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907

82% match

Loading thumbnail…

Line Chart Covid19 Data

This line chart displays cumulative COVID-19 cases in the United States over time, using data from the New York Times GitHub repository. The visualization plots dates on the x-axis and case counts on the y-axis, with a thick red line connecting data points. It is built with D3.js v6, using `d3.csv` for data loading, `d3.timeParse` for date formatting, and `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis labels and a title added as SVG text elements.

BBrian Gilmore

81% match

Loading thumbnail…

Covid-19 Cases from 2020 to 2023

This interactive line chart visualizes COVID-19 case averages and death counts across U.S. states from 2020 to 2023, sourced from the New York Times rolling-averages dataset. A dropdown menu lets viewers toggle between the two metrics, triggering a smooth 1-second transition that redraws the line path. The visualization uses D3 v7 with an SVG renderer, employing `d3.line()` for path generation, `d3.scaleTime()` and `d3.scaleLinear()` for axes, and a color ordinal scale with `d3.schemeSet2`. Gridlines and labeled axes contextualize the trends.

Xxiaojingwu138

81% match

Loading thumbnail…

Covid-19 Time Series(I Forked)

This example shows the global spread of confirmed COVID-19 cases across countries from January 22, 2020, to the present day. A date slider lets viewers scrub through time, updating the size of orange circles on a world map to reflect the reported case count per location, with hover tooltips showing country-level details. The visualization uses D3.js for map rendering with `d3.geoPath` and `geoMercator`, `d3.scaleSqrt` for circle sizing, and `d3-zoom` for interaction. Data comes from Johns Hopkins University, loaded via CSV, with countries drawn from TopoJSON and animated transitions between dates.

AAdrianTNare

80% match

Loading thumbnail…

COVID-19 Total Cases Over Time

This visualization displays the progression of COVID-19 total cases over time as a line chart with hover-based tooltips showing exact date and case counts. It loads data from a remote CSV via d3.csv and renders an SVG line using d3.line with linear and time scales. The chart includes axes from d3.axisBottom and d3.axisLeft, and interactive mouseover/mousemove handlers using d3.pointer and d3.bisector for nearest-point detection. The tooltip, styled as a separate HTML element, updates its position and text dynamically.

AAbdul Kareem

80% match

Loading thumbnail…

COVID-19 US Interactive

This interactive line chart displays the rolling seven-day average of COVID-19 cases in the United States over time. The visualization uses React and D3 v6, with the data sourced from the New York Times’ public COVID-19 repository. The chart plots dates on the x-axis and average cases on the y-axis, rendered as an SVG using custom `AxisBottom`, `AxisLeft`, and `Marks` components. Hovering over data points triggers a `Tooltip` showing the formatted value. The code leverages D3’s `scaleTime`, `scaleLinear`, and `csv` for data parsing and scaling.

DDasbach.EJ

80% match