Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Bbhanuteja1807@gmail.com
Last edited Mar 13, 2023
Created on Mar 13, 2023

This fork of a D3 scatter plot animates US COVID-19 rolling averages. The chart plots time on the x-axis and cycles between two y-axis metrics, cases_avg and deaths_avg, with circles animating to new positions. It uses a reusable `scatterPlot` function with d3 `scaleTime` and `scaleLinear` scales, `axisLeft` and `axisBottom` axes, and transitions on circle positions. The data is loaded via d3 `csv` from the NYT rolling-averages repository.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the NY Times Covid-19 Dataset US .

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This interactive scatter plot animates COVID-19 rolling averages for the United States, toggling between case and death counts over time. It uses the D3.js library with `scaleTime` and `scaleLinear` for axes, `transition` for smooth animations, and `selectAll().join()` for incremental updates. The visualization cycles between metrics every 2.4 seconds, slowing updating circle positions with a staggered delay effect. Data comes from the NY Times rolling-averages CSV, rendered as SVG.

CCurran Kelleher
96% match
Loading thumbnail…

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

This animated scatter plot tracks COVID-19 deaths and case averages across the United States using a reusable D3 chart framework. The visualization cycles between two metrics every five seconds, transitioning circles smoothly along the time-based x-axis and linear y-axis. Data comes from the NY Times rolling averages dataset, rendered as SVG circles with a dual-axis format showing month labels and annual year markers. The chart uses D3 v6.7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `transition` to handle the temporal updates and animated position changes.

Sserebryanaya.n@gmail.com
96% match
Loading thumbnail…

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

This chart plots daily COVID-19 deaths and case averages across the US using NY Times rolling-averages data. An animated scatter plot, it cycles between two metrics every 2.4 seconds, with circles updating smoothly via D3’s `transition`. The reusable framework, built with `scatterPlot.js`, leverages `scaleTime` and `scaleLinear` for axes, plus `axisLeft`, `axisBottom`, and `timeFormat` for labeling. SVG rendering and the `d3.select` API manage the dynamic visualization.

DDasbach.EJ
95% match
Loading thumbnail…

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

Drawing on New York Times rolling COVID-19 data for the United States, this animated SVG scatter plot uses the reusable D3 chart pattern to toggle between average case and death counts every 2.4 seconds. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, with `d3.transition` animating circle positions and y-axis label updates. The chart highlights the vaccination milestone at 30% and sources data from the NYT GitHub repository.

DDasbach.EJ
93% match
Loading thumbnail…

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

This reusable D3 scatter plot displays rolling-average COVID-19 deaths in the United States from New York Times data, with each circle representing a daily average. The chart uses `scaleTime` and `scaleLinear` to map dates and death averages, while `axisBottom` and `axisLeft` render labeled axes. It layers multiple bottom axes for months and years, and includes annotations marking a vaccination milestone and source attribution. The code follows the reusable chart pattern from Bostock’s “Towards Reusable Charts,” exposing width, height, data, and radius as accessor properties. Data loads via `d3.csv` from the NYT GitHub repository into an SVG rendered across the full viewport.

Bbrockley0
92% match
Loading thumbnail…

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

DDasbach.EJ
91% match
Loading thumbnail…

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

This animated scatter plot displays COVID-19 death and case averages across the United States over time, using rolling data from the New York Times. The visualization toggles between deaths and cases every 2.4 seconds, smoothly transitioning circles along the y-axis while the x-axis remains a time scale. Built with reusable D3.js chart components, the code leverages `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. A `transition` with staggered delays animates circle positions, while `d3.csv` loads the NYT rolling-averages dataset directly from GitHub.

DDasbach.EJ
91% match
Loading thumbnail…

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

A reusable scatter plot framework displays daily COVID-19 death averages across the United States using New York Times rolling-averages data. The chart maps dates on the x-axis against death counts on the y-axis, rendering small circles via D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Labels annotate the plot with "UNITED STATES" and a "Vaccination @30%" marker, while source attribution appears at the bottom. The implementation follows the reusable chart pattern with getter-setter methods, loading CSV data through `d3.csv` and rendering with SVG.

CCurran Kelleher
91% match