100%

Scatter Plot

✓ Published1🌍 Public

Last edited Sep 16, 2024

Created on Sep 16, 2024

This scatter plot visualizes the relationship between COVID-19 cases and deaths in Massachusetts, using data from a US states CSV file filtered to a single state. The D3.js code, authored by sydneypeno, constructs a linear-scale plot with axes for cases (x-axis) and deaths (y-axis). It implements custom formatting through d3.scaleLinear, axisBottom, and axisLeft functions to generate the chart, rendering data points as semi-transparent steelblue circles. The visualization demonstrates a straightforward correlation between cumulative cases and deaths over time.

AI-generated description

A simple scatter plot with D3 showing the [Covid Data Set ].

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot for Covid

This scatter plot visualizes COVID-19 data for the top 10 countries, showing the relationship between total cases and total deaths. The visualization uses D3.js v7 with SVG rendering to display circles for each country, where the x-axis represents total cases and the y-axis represents total deaths. The code loads CSV data from a GitHub gist, processes it with JavaScript array methods, and uses d3.scaleLinear to create scales for both axes. Axis labels and grid lines are generated using d3.axisBottom and d3.axisLeft, with margins defining the plot area.

MM Hema

81% 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

80% match

Loading thumbnail…

Simple Scatter Plot

This simple scatter plot visualizes COVID-19 data, mapping confirmed cases on the x-axis against deaths on the y-axis for each country. Each circle represents a country, with the plot revealing a strong positive correlation and one prominent outlier with over 110 million confirmed cases. The visualization uses D3's `scaleLinear`, `axisLeft`, and `extent` functions to create the scales and axes, while circles are rendered with SVG elements. The code leverages `@curran/axis-labels` for axis labeling, reading from a static CSV dataset.

Aabell@wpi.edu

80% match

Loading thumbnail…

data visulalization Scatter Plot

This scatter plot visualizes COVID-19 cases by country, plotting total deaths against total cases. Each circle represents a country, with color encoding the continent, and the plot includes axes, labels, and a legend. The code loads CSV data from a GitHub repository, uses D3 v7 scales and SVG rendering to position the circles, and employs `d3.axisBottom` and `d3.axisLeft` to generate the axes.

Bbudalavijay2001@gmail.com

80% match

Loading thumbnail…

Covid-19 Records in MA

This visualization shows the trend of confirmed COVID-19 cases in Massachusetts from February to September 2020, plotted as individual circles on a time-series scatterplot using React and D3 v5. The SVG chart uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with the y-axis formatted in compact notation and tooltips showing the month via the native SVG `<title>` element.

SStefanZhang

80% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes daily COVID-19 cases and deaths across multiple countries, using red semi-transparent circles on an SVG canvas. The x-axis maps daily cases while the y-axis maps daily deaths, with data sourced from a CSV file. Built with D3 v5, the visualization uses scaleLinear, axisBottom, and axisLeft to construct the axes, and the csv function loads the dataset. The code filters data through extent and nice functions to set the scales, while a title and axis labels are added as text elements.

Iibcs47

78% 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

77% 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

77% match