Skip to main content
SimilarExport ZIP
100%

Dv2_5_Reusable Scatter plot

✓ Published0🌍 Public
NNagateja99
Last edited Jul 22, 2023
Created on Jul 22, 2023

A reusable scatter plot displays the relationship between COVID-19 deaths and cases per 100,000 people across US states, using rolling averages from the NY Times dataset. The visualization is constructed with D3.js version 6.7.0, employing the scatterPlot function to map data points as SVG circles with configurable radius and margins. The chart is rendered SVG in a browser, scaling axes via D3's scaleLinear, and using extent to compute data domains. Axis labels are generated with axisLeft and axisBottom, while the data is loaded asynchronously with D3's csv parser.

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…

DV2_5_Reusable scatter plot

This reusable scatter plot visualizes COVID-19 rolling averages across US states, with 7-day average deaths per 100k on the x-axis and cases per 100k on the y-axis. It uses D3.js version 6.7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from the NY Times COVID-19 dataset. The chart’s core logic is encapsulated in a custom `scatterPlot()` function following the Towards Reusable Charts pattern, allowing configurable width, height, margins, and data accessors. Circles are rendered via SVG, styled with the Share Tech font.

NNagateja99
96% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes the relationship between COVID-19 death and case averages per 100,000 people across US states, using data from the NY Times rolling-averages dataset. Each circle represents a state, plotted with `d3.scaleLinear` scales and rendered as an SVG. The chart is built as a reusable function via a custom `scatterPlot` module, configured with setters for width, height, data, margins, and radius. Axes are added using `d3.axisLeft` and `d3.axisBottom`. Data is loaded asynchronously with `d3.csv` and parsed before rendering.

SSaiSreya1
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This fork of a reusable D3 scatter plot displays New York Times COVID-19 rolling average data for US states, plotting deaths per 100,000 against cases per 100,000. Each circle represents a state, with position determined by d3.scaleLinear scales derived from the data extent. The visualization uses D3 version 6.7.0, employs d3.csv for data loading, and renders as SVG with d3.axisLeft and d3.axisBottom axes. The chart is implemented as a configurable closure function, allowing width, height, margins, and radius to be set via method chaining.

RRevanthGrreddy
89% match
Loading thumbnail…

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

DDasbach.EJ
89% 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
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot NY Times COVID Data US Cumulative

A scatter plot displays cumulative COVID-19 cases in the United States over time, with each point representing a daily data record. The visualization uses D3.js 6.7.0, specifically the `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` functions from D3's API to map dates to the x-axis and case counts to the y-axis. It loads data from the NY Times COVID-19 rolling averages dataset via `d3.csv`. The chart renders as an SVG, populating circular marks with a radius of one pixel, and includes axes labeled with a custom Share Tech font.

DDasbach.EJ
88% match