P

Peter VanNostrand

@PeterVanNostrand·21 public vizzes

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.

Loading thumbnail…

US Daily COVID-19 Vaccination Dashboard

This dashboard visualizes COVID-19 vaccination data across U.S. states, combining a map with a brushable time-series bar chart. The map displays circular marks positioned via `d3.forceSimulation` with `forceX` and `forceY` to avoid overlaps, sized by vaccination rates. The lower bar chart shows daily doses for a state selected from a dropdown menu, and brushing it updates the map’s date using `d3.brushX`, redrawing circles via SVG with `d3.transition`. Data comes from a CSV of state-level vaccination records, rendered with React, D3 v6, and TopoJSON.

Loading thumbnail…

Interactive COVID-19 Vaccination Dashboard | Final

A dashboard visualizes COVID-19 vaccination data across US states, showing daily doses in a brushable bar chart, a map with state-level vaccination rates, and a line chart tracking the share of available doses used. Users can select regions via a dropdown or map clicks, with brushing updating the map and line chart to reflect date ranges. Built with React and D3 v6, it employs `d3.geoPath`, `d3.forceSimulation` for map mark placement, `d3.brushX`, and SVG animations. Data comes from a US vaccination dataset by state/territory.

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.

Loading thumbnail…

Zoomable COVID Vaccine Map

This visualization uses a map of the United States to show the percentage of each state's population fully vaccinated against COVID-19 as of September 4, 2021. The radius of each blue circle is proportional to the state's vaccination rate, with circles positioned over state centroids. The map supports zooming via the `d3.zoom` API, which updates the SVG group's transform. The code builds the map using `d3.geoAlbersUsa` and `d3.geoPath` projections, and renders circles with proportional radii using a `d3.scaleLinear` scale. Data comes from a CSV file of US vaccination statistics, while state boundaries and centroids come from US Atlas GeoJSON and a local JSON file.

Loading thumbnail…

Buggy US Daily COVID-19 Vaccination Dashboard with Doughnuts

This dashboard visualizes US daily COVID-19 vaccination data, combining a choropleth map of US states with a bar chart for a selected state’s daily doses. The map displays doughnut charts at state centroids, where each doughnut’s arcs represent the percentage of fully vaccinated residents and doses used. Users can interact by selecting states via a dropdown, brushing the lower chart to update the map’s date, and hovering over bars for tooltips. Built with React and D3 v6, it uses `d3.geoPath`, `d3.forceSimulation`, `d3.scaleTime`, `d3.brushX`, and SVG animations. Data comes from US vaccination records by state/territory.

Loading thumbnail…

US Daily COVID-19 Vaccination Dashboard with Doughnuts

This dashboard visualizes US COVID-19 vaccination data with an interactive map and bar chart. The map displays doughnut charts for each state, where blue arcs show the percentage of fully vaccinated residents and green arcs show vaccine doses used. Users can select a state from a dropdown to view its daily vaccination counts, and brushing the bar chart updates the map’s displayed date. The visualization uses D3.js force simulation for non-overlapping circles, geoPath for map rendering, and React for state management. Data comes from a gist containing US vaccination statistics by state.

Loading thumbnail…

US Daily COVID-19 Vaccinations - Interactive Barchart

A daily bar chart displays COVID-19 vaccination doses administered in Massachusetts from April to September 2021, using D3 v6 with SVG rendering and animated transitions. Each bar represents a day’s total doses, with hover tooltips showing the date and dose count. An interactive dropdown menu lets users select different US states, triggering smooth bar updates and axis rescaling via `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Data comes from a gist CSV containing state-level vaccination statistics. The chart uses `transition()`, `join()`, and mouse event handlers for interactivity.

Loading thumbnail…

US Daily COVID-19 Vaccination - Brushable Dashboard

This dashboard visualizes US COVID-19 vaccination data through a brushable bar chart and map. A dropdown selects a state, displaying daily vaccination doses, while brushing the chart updates the map to show vaccination rates in each state for the selected date. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries, with circles sized by `d3.scaleLinear` based on the percentage of fully vaccinated people. Data comes from a CSV of state-level vaccination records, rendered as SVG with D3 v6 and React components, including animated transitions for bars and circles.

Loading thumbnail…

Fork of US COVID Vaccination Circles - Refactored

This visualization shows a map of the United States, plotting blue circles at the centroid of each state to represent the percentage of fully vaccinated residents as of September 4, 2021. The radius of each circle is scaled proportionally to the vaccination rate, allowing viewers to compare state-level progress at a glance. The code uses the D3.js library (version 5) with `geoAlbersUsa` projection and `geoPath` to render state boundaries, while `d3.scaleLinear` maps vaccination percentages to circle radii. State centroids come from a local JSON file, and vaccination data is loaded from a GitHub Gist containing U.S. vaccination data by state and territory.

Loading thumbnail…

US COVID Vaccination Circles

A map of the United States shows the percentage of each state’s eligible population fully vaccinated against COVID-19 as of September 4, 2021, with circle radius proportional to that percentage. Built with D3 v5 and TopoJSON, the visualization uses `d3.geoPath` to render state boundaries and a linear scale to size the circles, which are positioned using state centroids from a JSON file. Vaccination data comes from a CSV of state-level records, and the SVG circles are semi-transparent blue.

Loading thumbnail…

Massachusetts Daily COVID-19 Vaccinations - Interactive Barchart

This interactive bar chart displays daily COVID-19 vaccination doses administered in Massachusetts from April 1 to September 4, 2021. Each bar represents a single day’s total, with tooltips revealing the exact date and dose count on hover, while the other bars dim for emphasis. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for labels, and SVG rectangles with mouse event handlers. Data comes from a CSV of US state vaccination statistics, filtered to Massachusetts.

Loading thumbnail…

Fork of Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between quantitative measurements and categorical species through dropdown menus that change the x- and y-axis variables. It distinguishes between quantitative and categorical scales using d3.scaleLinear and d3.scalePoint, rendering circles as SVG elements with animated transitions via d3.transition and the selection.join pattern. Menus are built with a custom reusable d3 menu component using d3.dispatch for change events, with axes updated through d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Loading COVID-19 Vaccine CSV Data

This example demonstrates how to load and parse a CSV dataset of US state-level COVID-19 vaccination records, covering daily updates from April through September 2021. It displays the file size in kilobytes, row count, and column count. The code uses D3 v5’s `d3.csv` method to fetch and parse the data, then accesses `data.length` and `data.columns` to summarize the dataset. Alternative approaches using `fetch`, `async/await`, and `d3.csvParse` are also shown in commented-out sections.

Loading thumbnail…

Loading US Election CSV Data

This example demonstrates how to load and summarize US House election data from 2008 to 2020, displaying the file size, row count, and column count in a large HTML text element. It uses `d3.csv` to fetch and parse the remote CSV file, leveraging the promise-based `.then()` method to process the parsed data. The code also includes commented-out alternatives using `fetch` with `async/await` and `d3.csvParse`, as well as a nested promise pattern, showing multiple approaches for handling asynchronous data loading in D3 v5.

Loading thumbnail…

Loading Alcohol Consumption CSV Data

This example demonstrates the basics of loading and parsing a CSV dataset with D3.js. It fetches global alcohol consumption data from the World Health Organization and displays a summary of the file’s size, row count, and column count in large text. The visualization uses `d3.csv` to asynchronously load the remote dataset from a GitHub Gist, then `d3.csvFormat` and `data.length`/`data.columns` to compute the displayed metrics. The page renders the result inside a `<pre>` element with no charting or graphical elements.

Loading thumbnail…

Global Alcohol Consumption Scatterplot

This scatterplot shows per capita alcohol consumption in liters for seven selected countries from 2010 to 2019, with each country assigned a distinct color. The visualization uses D3 v6’s `scaleTime` and `scaleLinear` to map years and consumption values to SVG circle positions, with axes rendered via `axisLeft` and `axisBottom`. Data comes from a WHO-derived CSV loaded with `d3.csv`, filtered to highlight trends in wine, beer, spirits, and total alcohol across the decade.

Loading thumbnail…

US Election Data Scatterplot

This scatterplot displays US House election results from 2008 to 2020, plotting each candidate’s vote count against the total votes cast in their district. The x-axis shows total votes, while the y-axis shows candidate votes, with overlapping semi-transparent circles revealing density patterns. The visualization uses d3.v6 to load CSV data from a GitHub gist, parses rows with numeric fields, and renders points via SVG circles scaled with d3.scaleLinear. Axes are generated using d3.axisLeft and d3.axisBottom, with the chart sized to the full window.

Loading thumbnail…

SVG Practice Art

This example displays a playful SVG sketch inspired by the Olympics, featuring a large rectangular border, five interlocking circles in blue, black, red, yellow, and green, and a radial pattern of curved line segments around a central pink circle. The word “TOKYO 2020” appears in bold black text below. The visualization uses raw SVG elements—`rect`, `circle`, `path`, and `text`—with `transform` rotations to create the repeating spokes. The illustration is static, with no JavaScript libraries, and serves as practice for learning SVG fundamentals.

Loading thumbnail…

Massachusetts Daily COVID-19 Vaccinations - Bar Plot

This example shows a daily bar chart of COVID-19 vaccination doses administered in Massachusetts from April 1 to September 4, 2021. Using D3 v5’s `scaleTime` and `scaleLinear`, it maps dates and daily vaccination counts to SVG rectangles. The code loads a CSV of US state vaccination data via `d3.csv`, filters rows for one state, and renders axes with `axisBottom` and `axisLeft`. Bars are positioned and sized using the scaled x and y values.

Loading thumbnail…

Massachusetts Daily COVID-19 Vaccinations - Scatterplot

This scatterplot displays the daily number of COVID-19 vaccinations administered in Massachusetts from April 1 to September 4, 2021. Each red circle represents a single day’s total, plotted on a time-scaled x-axis and a linear y-axis, revealing trends and fluctuations in vaccination rates. The visualization uses D3 version 6.7.0, leveraging `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for grid ticks, and SVG circles for marks. Data is loaded from a CSV file containing vaccination statistics for all US states, filtered to show only Massachusetts.