Skip to main content
SimilarExport ZIP
100%

D3 Component - Interactive Scatterplot

✓ Published0🌍 Public
EEthan
Last edited Dec 15, 2022
Created on Dec 14, 2022
Forked from HTML Starter

This interactive scatterplot visualizes the relationship between flu shot coverage rates and high school education ratios across U.S. states, with points colored by region. Hovering over a point highlights all states in that regional group, while clicking displays the state name as a tooltip. Built with D3.js v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes, with transitions animating point size and color changes. Data is loaded via `d3.csv` from a GitHub repository, rendered as SVG circles.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

123

This dashboard visualizes COVID-19 vaccination data across US states, combining a choropleth-style map with an interactive bar chart. The map uses `d3.geoAlbersUsa` projections and `d3.geoPath` to render state boundaries, with circle sizes scaled by vaccination rates via `d3.forceSimulation` and `forceCollide` to prevent overlap. The lower bar chart displays daily doses for a selected state, using `d3.brushX` to let users select a date range. Data comes from a US vaccination dataset via CSV, with React managing state for dropdown selections and map updates.

Nniuyizhan
76% match
Loading thumbnail…

d3 scatter plot

A D3 scatter plot visualizes the relationship between state population and the number of infections for diseases in the US in 1975, using a logarithmic scale on both axes. Each maroon circle represents a state-disease data point, and hovering over a circle turns it crimson and reveals a tooltip with the disease name, state, population, and infection count. The visualization uses `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, with data loaded via `d3.csv` from a remote gist. Rendered as SVG, the plot includes labeled axes and a title, with the tooltip styled through an HTML div.

AAndrew
76% 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
76% 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
75% match
Loading thumbnail…

Interactive COVID-19 Dashboard

This interactive COVID-19 dashboard visualizes daily vaccination doses administered across U.S. states, allowing users to select a state via dropdown or click on map markers to update the charts. The map displays doughnut charts showing each state’s percentage of fully vaccinated residents and vaccine doses used, with a brushable bar chart below to choose a date for the map. Built with React and D3 v6, the visualization uses `d3.forceSimulation` for circle positioning, `d3.geoPath` for state outlines, and `d3.arc` for the doughnut segments, with data sourced from US vaccination records.

PPeter VanNostrand
75% match
Loading thumbnail…

Interactive COVID-19 Dashboard Bar and Map

This interactive dashboard visualizes COVID-19 vaccination data across U.S. states, combining a bar chart of daily doses for a selected state with a map showing vaccination rates nationwide. Users brush the bar chart to choose a date, and the map updates to display doughnut charts at state centroids, with arcs indicating the percentage of residents fully vaccinated and doses used. The visualization uses React, D3 v6 (including `d3.forceSimulation`, `d3.geoPath`, `d3.brushX`, and `d3.scaleSqrt`), and SVG rendering. Data comes from US Vaccination Data by State/Territory, with map shapes from the us-atlas TopoJSON.

PPeter VanNostrand
75% match
Loading thumbnail…

Untitled

This scatter plot displays COVID-19 deaths and vaccination rates across US states over time, sourced from the New York Times rolling-averages dataset. The chart uses D3 version 6.7.0 with reusable chart architecture, implementing scaleTime and scaleLinear scales, axisBottom and axisLeft components, and timeFormat for date labels. Custom annotations highlight the United States title and a 30% vaccination threshold. The code imports data via d3.csv and builds circles with selectAll and join patterns, while demonstrating a modular scatterPlot factory function with getter-setter accessors.

Sssingh175
75% match
Loading thumbnail…

D3Times

A scatter plot displays correlations between state-level health risk factors and socioeconomic indicators, plotting each U.S. state as a labeled circle. The visualization pairs smoking rates with poverty rates, with state abbreviations placed over each point. The code loads a CSV dataset and parses its numeric fields, then uses D3.js version 5 with SVG rendering to create the chart. Axes are generated using `d3.scaleLinear` and `d3.scaleBand`, while the Bootstrap framework provides the page layout and styling.

FFrankoOrtmann
75% match