Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot: eu_vaccinations.csv

✓ Published1🌍 Public
DDaniel Ribaudo
Last edited Sep 28, 2021
Created on Sep 15, 2021

This scatter plot displays EU vaccination data, plotting the week number on the x-axis against the number of first doses on the y-axis, with each point colored by vaccine type (AZ, COM, MOD, JANSS, UNK). The visualization uses D3 v6 with an SVG rendering, creating a linear scale for both axes via `d3.scaleLinear` and `d3.extent`. Data is loaded asynchronously from a CSV file hosted on GitHub Gist using `d3.csv`. The code maps each row to a circle with a fixed radius and opacity, using `d3.select` and `.join` to add marks to the SVG.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot.

Forked and authored by Daniel Ribaudo.

The data comes from this Gist: EU Vaccinations

Within this dataset, city names are provided alongside their latitude, longitude, and population.

I added comments to this file to demonstrate understanding of various pieces of code. I edited the required segments (import, circle radius, and circle opacity) as well as other segments (color of the plot points, bounds of the margin to allow the full numbers to be displayed).

One issue with this data is that it needs to be aggregated in some way to work in this format. One way of doing this would be to sum rows which have the same YearWeekISO and Vaccination type, as these are only different by area. As of right now, there is too much going on in this one graph.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot - Aggregating eu_vaccinations.csv

This scatter plot visualizes aggregated COVID-19 vaccination data from the eu_vaccinations.csv file, showing weekly FirstDose counts by vaccine type across European cities. The data is processed using d3.flatRollup and d3.sum to aggregate values by YearWeekISO and Vaccine, with each vaccine type assigned a distinct color via a switch statement. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for labeling, and renders individual circles as SVG elements sized with a fixed radius of 2 pixels. The source dataset includes city names with latitude, longitude, and population information, though the plotted values focus on the vaccination aggregates.

DDaniel Ribaudo
92% match
Loading thumbnail…

Scatter Plot Vaccination

This interactive scatter plot visualizes COVID-19 vaccination rates in the United States over time, using data from Our World in Data. The chart displays the percentage of the population that is fully vaccinated against infection, with the y-axis showing the proportion of the population and the x-axis representing dates. Users can toggle between fully and partially vaccinated metrics via a dropdown menu. The visualization uses D3 v6 with SVG rendering and animation, employing scaleTime and scaleLinear scales, axisBottom and axisLeft components, and selection.join for smooth transitions. An annotation label highlights the current maximum vaccination percentage.

DDasbach.EJ
79% match
Loading thumbnail…

Fork of Scatter Plot Vaccination and Cases

This scatter plot visualizes the relationship between COVID-19 vaccination rates and infection cases in the United States over time. It overlays two datasets—vaccination percentages from Our World in Data and case counts from the New York Times—on a shared date axis, with annotations highlighting the final date's progress. The visualization uses D3.js v6, specifically `scaleTime`, `scaleLinear`, `selection.join` for animated circle transitions, and `d3-annotation` for labels. SVG rendering animates circles growing from zero radius while a dropdown menu allows switching between partial and fully vaccinated metrics.

DDasbach.EJ
78% match
Loading thumbnail…

Untitled

This example displays a scatter plot of vaccination data across countries, with each circle representing a country’s number of vaccinated individuals against its population. The visualization uses d3.v4 to append SVG circles to a div, mapping data fields to x and y coordinates. The code sets up margins, dimensions, and scales, though the actual scale functions are not fully defined in the provided snippet. The dataset contains country names, vaccination counts, and population figures, rendered as green dots.

PPeiyuan Xu
78% match
Loading thumbnail…

Data visualizations

This visualization uses D3 v5 to display cumulative COVID-19 vaccination totals over time for multiple countries, with each country represented by a distinct colored line. The line chart employs a time-based x-axis and a linear y-axis scaled to billions of vaccinations. The code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `line` with `curveBasis` to render the SVG paths, while a custom color legend function shows the country categories. Data comes from a GitHub-hosted CSV of vaccination records.

GGerasimos Katsagannis
78% match
Loading thumbnail…

3rd

This visualization shows the cumulative number of COVID-19 vaccinations in the United States over time, plotted as a green line with individual data points. It uses D3 v7 to load a CSV dataset from GitHub, parse dates, and render an SVG chart with time and linear scales. Tooltips appear on mouseover via D3 event handlers, displaying the exact date and vaccination count, while rotating x-axis labels and axis generators like `d3.axisBottom` and `d3.axisLeft` structure the timeline.

Jjaideeptripurani12@gmail.com
78% match
Loading thumbnail…

Loading and Parsing eu_vaccinations.csv

This example loads a CSV of European COVID-19 vaccination data and displays a simple summary of its file size, row count, and column count. The page uses `d3.csv` to fetch and parse the remote file from a GitHub Gist, then formats the result with `d3.csvFormat` and updates the text of a `pre` element. The data source is the ECDC’s public vaccination dataset, and the visualization prioritizes demonstrating data loading and parsing rather than graphical output.

DDaniel Ribaudo
77% match
Loading thumbnail…

Scatter Plot Vaccination and Cases

This scatter plot shows how COVID-19 vaccination rates correlate with case counts in the United States, using data from Our World in Data. An interactive dropdown menu lets viewers switch between partially and fully vaccinated metrics, while the chart displays the proportion of the population vaccinated over time. The visualization uses D3 v6 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `selection.join` for smooth transitions between data updates, and `d3-svg-annotation` to highlight the maximum vaccination percentage.

DDasbach.EJ
77% match