Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

100%

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

✓ Published0🌍 Public

Last edited Jul 24, 2023

Created on Jul 22, 2023

This scatter plot shows the relationship between COVID-19 vaccination rates in blue and reported case counts in gray for the US population, with a dual y-axis for the two metrics. An interactive menu lets viewers toggle between partially and fully vaccinated proportions. The visualization uses D3 v6 with the `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `axisRight` APIs, and animates circle positioning via `transition` and `selection.join`. Data comes from the CDC and NYT rolling averages, with vaccination values normalized by US population size.

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…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive dual-axis scatter plot visualizes the relationship between COVID-19 vaccination rates (blue circles) and reported cases (gray circles) in the United States over time, using D3 version 6 with SVG rendering and animated transitions. It draws on CDC vaccination data and NYT rolling averages, scaling vaccination proportions against raw case counts with separate y-axes. The visualization includes a dropdown menu to toggle between partially and fully vaccinated metrics, and uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and selection joins with transitions for the animation.

Xxiaojingwu138

98% match

Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive scatter plot shows COVID-19 vaccination rates in blue against reported cases in gray, using a dual y-axis to compare the two disparate data scales. The chart includes a dropdown menu to toggle between partially and fully vaccinated populations, with annotations highlighting key milestones. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` for enter/update/exit circle transitions, rendering SVG with animated growth on load. Vaccination data comes from Our World in Data, while case counts are sourced from NYT rolling averages.

DDasbach.EJ

96% match

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

A dual-axis scatter plot visualizes the relationship between COVID-19 vaccination rates and reported cases in the US, using steel-blue circles for vaccination proportions and gray circles for 7-day case averages. An interactive menu allows switching between partial and fully vaccinated data. Built with D3 v6, the visualization uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` to render SVG circles with animated transitions. Data comes from Our World in Data and the New York Times, with a chart title and annotations highlighting the reduction in cases.

Yyanikk@gmail.com

94% match

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive scatter plot visualizes COVID-19 vaccination rates (in blue) against reported case counts (in gray) for the US population, using a dual y-axis. The visualization animates data points over time using D3 v6 and SVG, with vaccination data from Our World in Data and case data from the NYT. Users can toggle between partial and fully vaccinated metrics via a custom menu. The code employs D3 scales, axes, transitions, and the `selection.join` pattern for reusable chart components.

RRochisman Datta

94% match

Loading thumbnail…

Fork of Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This scatter plot overlays COVID-19 vaccination rates (blue) and reported cases (gray) in the US over time, using dual y-axes to compare the two metrics. It reveals the inverse relationship between rising vaccination and falling case counts, with an annotation highlighting the percent reduction. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` for animated circle transitions. Data comes from Our World in Data vaccine counts and NYT rolling averages, rendered as SVG elements with a menu to toggle between partial and full vaccination metrics.

Yyanikk@gmail.com

93% match

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This visualization displays the relationship between COVID-19 vaccination rates and 7-day average case counts in the United States using a dual-axis scatter plot. Steel-blue circles represent the proportion of the US population vaccinated, while gray circles show infection counts, with animations transitioning the radius and positions of points. The chart annotates the maximum vaccination percentage and case count reduction over time. Built with D3 v6, it utilizes `scaleTime`, `scaleLinear`, axis components, and `selection.join` for data binding, drawing from Our World in Data and NYT rolling averages datasets.

JJesus Angel

92% match

Loading thumbnail…

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This scatter plot visualizes COVID-19 vaccination rates and reported case counts over time, using a dual y-axis to compare the two metrics. The chart demonstrates a reduction in cases as vaccination increases, with blue circles representing vaccination proportions and gray circles showing seven-day average case counts. The visualization uses D3 v6 with `scaleTime`, `scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `selection.join` for animated circle updates. Data comes from Our World in Data and the New York Times rolling averages, rendered as SVG elements with CSS-styled axes.

DDonald Bagwell

91% match

Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis - TN

This scatter plot animates COVID-19 vaccination rates and 7-day average case counts for the US population, using a dual y-axis where steelblue circles represent the proportion of people vaccinated and gray circles represent case counts. The visualization demonstrates that as vaccination numbers rise, case numbers decline, with annotations highlighting the peak and final case counts. Built with D3.js (version 6.7.0), it implements reusable scatter plot patterns with custom scales for time and linear axes, animated circle growth, and interactive menu selection for toggling between partial and fully vaccinated data. The code leverages D3's data joins, transitions, and annotation APIs, pulling data from Our World in Data and the New York Times rolling averages dataset.

TToly

91% match