Fork of make a face

100%

Fork of make a face

✓ Published0🌍 Public

Last edited Sep 27, 2021

Created on Sep 27, 2021

This example shows the impact of vaccines on measles cases across U.S. states from 1928 to 2003. A heatmap displays yearly case rates per 100,000 people, with a marker indicating when the measles vaccine was introduced in 1963. The visualization uses D3 v6 to create an SVG, employing scales like `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleSequentialSqrt` with the `d3.interpolatePuRd` color scheme. A line marks the vaccine introduction year, while the legend and tooltips clarify case counts.

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…

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

75% match

Loading thumbnail…

Fork of make a face d3js

This example shows an interactive face made of circles that respond to mouse movement using a D3 force simulation. The visualization reads COVID-19 case data from a CSV file, though the display itself focuses on the playful animated face rather than a traditional chart. Built with D3 v7 and React, the code uses `d3.forceSimulation` to position the facial features, which are rendered as SVG elements within a 960x500 viewport. The simulation continuously updates node positions, creating a lively, dynamic expression that follows the pointer.

GGodspower Wodi

72% match

Loading thumbnail…

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

This scatter plot overlays COVID-19 vaccination rates (blue) and reported cases (gray) in the US over time, using dual y-axes to compare the two metrics. It reveals the inverse relationship between rising vaccination and falling case counts, with an annotation highlighting the percent reduction. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` for animated circle transitions. Data comes from Our World in Data vaccine counts and NYT rolling averages, rendered as SVG elements with a menu to toggle between partial and full vaccination metrics.

Yyanikk@gmail.com

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

71% match

Loading thumbnail…

Fork of Fork Final 5702

This dashboard visualizes COVID-19 vaccination data across U.S. states. A map displays daily doses per state using scaled circles positioned via `d3.forceSimulation` and a `d3.geoPath` projection, while a lower bar chart shows unemployment rates for a state selected from a dropdown menu. The code relies on D3 v6, React, and SVG with animated transitions for bars and circles. Data comes from a CSV of U.S. vaccination records.

Jjoslyn54

71% match

Loading thumbnail…

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

This interactive scatter plot visualizes COVID-19 vaccination rates (in blue) against reported case counts (in gray) for the US population, using a dual y-axis. The visualization animates data points over time using D3 v6 and SVG, with vaccination data from Our World in Data and case data from the NYT. Users can toggle between partial and fully vaccinated metrics via a custom menu. The code employs D3 scales, axes, transitions, and the `selection.join` pattern for reusable chart components.

RRochisman Datta

71% match

Loading thumbnail…

Fork of Fork by Yizhan Niu

This dashboard visualizes COVID-19 vaccination doses administered across the United States, combining a choropleth-style map with a linked bar chart. The map displays circles representing vaccination numbers for each state as of a selected date, while the lower bar chart shows the daily doses for a state selected via a dropdown menu. Users can brush the bar chart to choose a date range, updating the map accordingly. The visualization is built with React and D3 v6, using `d3.geoPath` for the map, `d3.forceSimulation` for circle packing, and `d3.brushX` for brushing interactions.

CChristalL99

71% match

Loading thumbnail…

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

This scatter plot visualizes COVID-19 vaccination rates and reported case counts over time, using a dual y-axis to compare the two metrics. The chart demonstrates a reduction in cases as vaccination increases, with blue circles representing vaccination proportions and gray circles showing seven-day average case counts. The visualization uses D3 v6 with `scaleTime`, `scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `selection.join` for animated circle updates. Data comes from Our World in Data and the New York Times rolling averages, rendered as SVG elements with CSS-styled axes.

DDonald Bagwell

70% match