Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot Dasbach

✓ Published7🌍 Public
DDasbach.EJ
Last edited May 9, 2021
Created on May 8, 2021

This scatter plot visualizes state-level COVID-19 trends by plotting death averages per 100,000 residents against case averages per 100,000, using New York Times rolling-averages data. Built with D3 v6, the reusable chart module `scatterPlot` uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The example demonstrates Mike Bostock’s reusable chart pattern, configuring width, height, margins, and radius through fluent setter methods.

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 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
91% 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
91% 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
91% 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
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot Dasbach

This fork of a reusable D3 scatter plot visualizes NY Times Covid-19 rolling averages for US states, plotting deaths per 100k against cases per 100k. Built with D3 6.7.0, it uses a `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG. The chart is fully responsive, sized to the window, and styled with the Share Tech font. Data is fetched via `csv` from the GitHub repository, with each state represented as a circle of fixed radius.

CCecilia831
87% match
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
86% match
Loading thumbnail…

Dv2_5_Reusable Scatter plot

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.

NNagateja99
86% match
Loading thumbnail…

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

This example shows COVID-19 deaths per day across the United States from NYT rolling-averages data, plotting each date as a scatter point with death counts on the y-axis. The reusable D3 scatter plot framework uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` within an SVG, with `d3.csv` fetching the remote dataset. The chart includes multiple axis groups for months and years, labeled titles, and a source attribution, all styled via custom CSS with a tech-inspired font.

DDasbach.EJ
84% match