Multiplot COVID-19 impact on health of US population

Fork of Multiplot COVID-19 impact on health of US population

This fork of a multiplot visualization shows the impact of COVID-19 on the US population, plotting daily case and death averages over time using data from The New York Times. A second chart displays vaccination rates from Our World in Data, with both plots rendered as SVG scatter plots using D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Interactive dropdown menus, built with D3 dispatch, let users toggle between case and death metrics, while animated transitions update circle positions and chart titles.

93% match

COVID-19 impact on health of US population

This interactive scatter plot visualizes COVID-19 impact on the US population, charting national rolling averages of cases and deaths over time since the pandemic began. Users can switch the y-axis metric between cases, deaths, and per-capita values via a dropdown menu built with D3’s dispatch system. The visualization uses d3.scaleTime and d3.scaleLinear to map dates and health indicators, with animated circle transitions handled through d3.transition. Data comes from the NY Times COVID-19 rolling averages dataset.

92% match

Annotated Grid Multiplot COVID-19 cases & vaccinated in US population

This example shows a multiplot of COVID-19 cases and vaccination rates in the U.S. population, rendered as two animated scatter plots from the NY Times and Our World in Data datasets. Each plot includes interactive menus for switching between case/death metrics and partial/full vaccination, while a d3-svg-annotation label highlights the peak vaccination percentage. The reusable chart pattern, inspired by Towards Reusable Charts, uses D3 scales, axes, transitions, and modular functions to build the responsive SVG visualizations.

88% match

Grid Multiplot COVID-19 cases & vaccinated in US population

This visualization compares COVID-19 cases and deaths with vaccination rates across the US population using two stacked scatter plots. The upper chart displays NY Times rolling averages for cases or deaths (selectable via a menu), while the lower chart shows Our World in Data vaccination percentages. Both plots use D3.js v6.7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to animate points. The `menu` and `menu2` modules use D3's `dispatch` for interactive re-rendering, with SVG output rendering the data across the full viewport width.

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes the rolling seven-day average of COVID-19 deaths and cases across the United States, drawing on data from the New York Times. The visualization, built with the D3.js library, employs a reusable chart framework with a `scatterPlot()` function. Using SVG rendering, it animates the transition between metrics, toggling between death and case averages every few seconds. The chart includes labeled axes, a title, and a source attribution, with the y-axis label updating to reflect the current metric.

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

The visualization animates daily COVID-19 mortality and case averages across the United States using NYT rolling-averages data. A reusable D3 scatter plot framework, built with `scaleTime`, `scaleLinear`, and `axisBottom`, transitions circles smoothly between the two metrics every 2.4 seconds. The SVG rendering displays month and year tick labels, a y-axis label, and a vaccination milestone annotation. It uses `selectAll`, `data().join()`, and `transition().delay()` to update positions and redraw axes.

TToly

#5 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes COVID-19 case and death averages across the United States using New York Times rolling-averages data. The D3.js chart transitions between two y-axis metrics—deaths_avg and cases_avg—on a timed interval, with circles positioned by date and value. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with transitions updating circle positions and axis labels. SVG rendering displays the full timeline with monthly and yearly tick formats, while the reusable scatterPlot function follows the Towards Reusable Charts pattern.

#4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes COVID-19 deaths and cases in the United States using New York Times rolling averages data. The visualization alternates between displaying average cases and average deaths on the y-axis every 2.4 seconds, with each data point representing a date. Built with D3 v6, the reusable chart uses `scaleTime` and `scaleLinear` for axes, `axisBottom` with `timeFormat` for month and year labels, and `transition()` with staggered delays for smooth circle repositioning. SVG rendering displays the full timeline with circles growing from radius zero via `transition.attr('r', radius)`.