Skip to main content
SimilarExport ZIP
100%

Sunburst,covid

✓ Published0🌍 Public
Aasimcyb@gmail.com
Last edited Apr 26, 2024
Created on Apr 24, 2024
Forked from Hello VizHub

This example shows the effectiveness of a vaccination campaign through a stacked area chart that visualizes first, second, and booster dose counts over time. Built with D3 v6, the code uses `d3.stack()` to layer the three vaccine categories, `d3.area()` with `d3.curveMonotoneX` to render the stacked areas, and `d3.scaleTime()` for the time axis. The SVG rendering includes axes and a legend, with data provided as a static JavaScript array of sample entries.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Can. COVID Vaccinations - Line Chart with React & D3 - Fork

This fork displays Canadian COVID-19 vaccination counts over time using four smoothed lines for total vaccinations, people vaccinated, fully vaccinated, and boosters. It loads data from the Our World in Data GitHub repository via d3.csv, then renders the chart with d3.scaleTime, d3.scaleLinear, and d3.line with curveMonotoneX. A d3.bisector-based tooltip, gradient background, legend, and axis labels complement the React-managed SVG.

CChris Bodnarchuk
75% 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
75% 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
73% match
Loading thumbnail…

test

This example visualizes COVID-19 vaccination rates in blue against reported cases in gray for the US population, using a dual y-axis to compare the two metrics over time. The scatter plot animates point positions and radii using D3’s selection.join and transition APIs, with an interactive menu to toggle between partial and fully vaccinated data. Data comes from Our World in Data and the NYT rolling averages, rendered as SVG circles with axis labels, annotations, and a chart title.

PPavan Nimmagadda
73% match
Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive scatter plot shows COVID-19 vaccination rates in blue against reported cases in gray, using a dual y-axis to compare the two disparate data scales. The chart includes a dropdown menu to toggle between partially and fully vaccinated populations, with annotations highlighting key milestones. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` for enter/update/exit circle transitions, rendering SVG with animated growth on load. Vaccination data comes from Our World in Data, while case counts are sourced from NYT rolling averages.

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

Fork of Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This visualization displays the relationship between COVID-19 vaccination rates and 7-day average case counts in the United States using a dual-axis scatter plot. Steel-blue circles represent the proportion of the US population vaccinated, while gray circles show infection counts, with animations transitioning the radius and positions of points. The chart annotates the maximum vaccination percentage and case count reduction over time. Built with D3 v6, it utilizes `scaleTime`, `scaleLinear`, axis components, and `selection.join` for data binding, drawing from Our World in Data and NYT rolling averages datasets.

JJesus Angel
73% match
Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive dual-axis scatter plot visualizes the relationship between COVID-19 vaccination rates (blue circles) and reported cases (gray circles) in the United States over time, using D3 version 6 with SVG rendering and animated transitions. It draws on CDC vaccination data and NYT rolling averages, scaling vaccination proportions against raw case counts with separate y-axes. The visualization includes a dropdown menu to toggle between partially and fully vaccinated metrics, and uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and selection joins with transitions for the animation.

Xxiaojingwu138
73% match