Skip to main content
SimilarExport ZIP
100%

Fork by Yizhan Niu

✓ Published5🌍 Public
Nniuyizhan
Last edited Dec 16, 2022
Created on Dec 15, 2022

This visualization uses U.S. state unemployment data from October 2019 to September 2022 to compare rates over time and across geography. A bar chart displays monthly unemployment for a selected state, with hover tooltips revealing exact rates, while an Albers US map uses force-directed, radius-scaled dots to show geographic severity at a fixed date. Built with React and D3 v6, the dashboard uses `d3.scaleTime`, `d3.brushX`, `d3.transition`, and `d3.forceSimulation` to animate bar updates and position map circles based on state centroids.

AI-generated description

We intend to visualize the unemployment rates of each state in the U.S. from October 2019 to September 2022.

We implemented a feature that allows users to select a state from the dropdown list on the top of the page so that they can explore the unemployment rate along the time. Whenever users move the month on a bar, a label of corresponding unemployment rate will appear.

We also explored the geographical distribution of unemployment rates using a map. The size of the blue dots represent the intensity of unemployment situation in that state.

Data Source: US Vaccination Data by State/Territory

Code Source: US Daily COVID-19 Vaccination Dashboard

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork by Yizhan Niu

This visualization explores U.S. state unemployment rates from October 2019 to September 2022. Users select a state from a dropdown menu to view its unemployment trend in an animated bar chart, while a geographic map displays the latest rates via blue dots sized with `d3.scaleLinear`. The bar chart updates smoothly using `d3.transition`, and hovering reveals tooltips. The map uses `d3.geoPath` with a topojson map and `d3.forceSimulation` for circle placement. Data is loaded via `d3.csv` from a gist.

FFarhaan Qazi
93% match
Loading thumbnail…

Fork of Fork of Fork by Yizhan Niu

A dashboard visualizes US unemployment and vaccination rates by state. A choropleth map displays circles sized by vaccination rates, positioned via `d3.forceSimulation` with collision detection. An interactive bar chart shows daily doses, filtered by a dropdown menu, while a brush selects dates for the map. Built with React, D3 v6, SVG, and `d3.geoAlbersUsa` projections, data comes from US Vaccination Data by State/Territory.

Nniuyizhan
86% match
Loading thumbnail…

Fork of Fork by Yizhan Niu

A dashboard visualizes state-level COVID-19 vaccination data, showing daily doses administered on a U.S. map and a corresponding bar chart for a selected state. Users choose a state from a dropdown menu and brush the lower bar chart to filter dates, updating the map’s circles. Built with D3 v6 and React, it uses `d3.geoPath` for state outlines, `d3.forceSimulation` for non-overlapping circles, and `d3.brushX` for date selection. Data comes from US Vaccination by State/Territory.

CChristalL99
82% match
Loading thumbnail…

Fork of Jos

This visualization shows a choropleth map of US state unemployment rates from January 2020 to December 2022. A dropdown menu lets users select a specific month and year to update the map’s color encoding. The map uses a threshold color scale with dark brown for higher unemployment. Hovering over a state triggers a tooltip with details. The visualization is built with React and D3.js, using d3.geoPath to render the map from TopoJSON data and d3.csv to load the unemployment data.

Jjoslyn54
80% match
Loading thumbnail…

Fork of Fork by Yizhan Niu

This dashboard visualizes COVID-19 vaccination doses administered across U.S. states, combining a choropleth-style map with a bar chart of daily doses for a selected state. A dropdown menu allows switching states, while the map displays dose counts for a chosen date. Built with React and D3 v6, it uses `d3.forceSimulation` to position non-overlapping circles and `d3.geoPath` for state boundaries. Data comes from a CSV of US vaccination records.

CChristalL99
79% 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
79% match
Loading thumbnail…

Fork of bubble chart

This interactive bubble chart compares unemployment rates over time across ten selected U.S. states. Each circle’s position encodes the year and unemployment percentage, while its size and color map to the rate and state, respectively, using d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10. The visualization includes a legend and interactive tooltips, rendering SVG elements with axis functions d3.axisBottom and d3.axisLeft. Data comes from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
79% match
Loading thumbnail…

Fork of HeatMap:

This visualization displays unemployment rates across US states for the year 2022, rendered as a single-column heatmap using shades of blue. Built with D3 v6, it uses `d3.scaleBand` for the x and y axes, `d3.scaleSequential` with an interpolateBlues color scale, and SVG rectangles for each state cell. Interactive tooltips appear on mouseover using D3's selection API, showing state name, year, and unemployment percentage. Data comes from a CSV file on unemployment per US state.

Oomniaabouhassan@gmail.com
78% match