covid data viz

100%

covid data viz

✓ Published0🌍 Public

Last edited Mar 24, 2022

Created on Mar 23, 2022

This example plots COVID-19 data from the Our World in Data CSV as a scatterplot, with new cases on the x-axis and deaths on the y-axis. It uses D3 v7 to load the CSV, slice the dataset to a manageable subset, and append circles to an SVG. The code samples the raw data by taking every thousandth row, and scales the plot area with fixed margins, though the scales are incomplete.

AI-generated description

A demonstration of how to start using D3 version 6.

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

83% match

Loading thumbnail…

Test Scatter Plot

This scatter plot visualizes COVID-19 data, comparing the number of cases and deaths for four countries. The chart uses SVG circles to represent each country, with D3.js’s `scaleLinear` and `extent` functions to map the data to axes, and `axisLeft` and `axisBottom` to render the labeled axes. The code imports `csv` to load the data from `data.csv` and applies D3 v6 to build the visualization, with a clear title and axis labels.

CChristine Lanser

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

82% match

Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This scatter plot visualizes COVID-19 total cases against total deaths, with each country represented by a symbol scaled according to a 100-pixel size. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render SVG marks and axes. Data loads from a GitHub-hosted CSV via `d3.csv`, with margins and dimensions set dynamically to the window size. The reusable `scatterPlot` function exposes configuration methods for data, value accessors, and dimensions.

MM Hema

81% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes CDC COVID-19 data, plotting daily new deaths against new cases, with each point representing a 14-day moving average. The chart reveals a general correlation where more infected cases correspond to more deaths. Built with D3 v6, the visualization uses `d3.csv` to load the dataset and `d3.scaleLinear` to map values to screen coordinates, with points rendered as SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire browser window.

VVonnie

81% match

Loading thumbnail…

COVID DATA

This visualization presents COVID-19 data from the Our World in Data GitHub repository, showing total cases and deaths aggregated by country. The code uses d3.csv to load the dataset, d3.rollup to group and sum values by location, and d3.line with d3.scaleTime and d3.scaleLinear to plot a line chart. Although a chart-rendering function is defined, the visualization does not display the chart in the browser, as the SVG element is never appended to the page.

FFarhaan Qazi

81% match

Loading thumbnail…

A2Q3

This interactive scatterplot visualizes COVID-19 metrics across countries by continent, plotting selectable attributes from the Covid World May Data CSV on x- and y-axes. Users can compare new cases, total cases, and death counts, with points colored by continent via a legend. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles render the data and dropdown menus control axis selection.

MmNamratha25

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

80% match