Unemployment Rate vs Population Scatter Plot

Fork of Simple Scatter Plot

This scatter plot visualizes the unemployment rate across different US states for a given year, using data from the "Unemployment in America Per US State" dataset. Each circle represents a state, with its position on the y-axis scaled to the unemployment rate. The plot uses D3's `scaleBand` for the categorical x-axis (states) and `scaleLinear` for the y-axis, with axes from `axisBottom` and `axisLeft`. Circles are rendered with configurable radius and opacity, and clicking a circle triggers an alert showing the state and its rate. The visualization is built using D3's join methodology for declarative SVG updates.

85% match

Unemployment rate by Country Scatter Plot (UN Stats), using D3.js

This scatter plot displays the unemployment rate for countries in 2019, with each point positioned by unemployment percentage on the x-axis and country name on the y-axis. The visualization uses D3.js to load the CSV data, filter for the relevant year and series, and render the chart as an SVG. It applies `scaleLinear` and `scalePoint` for axes, and `axisBottom` and `axisLeft` to generate tick marks, with filtered data sorted by value before plotting.

AAdamFrankWhite

80% match

Unemployment Rate Box Plot

This interactive D3.js box plot shows the distribution of 2020 unemployment rates across U.S. states, with each state's median, quartiles, and min-max range. Built using d3.scaleBand and d3.scaleLinear, it sorts states by median unemployment in descending order. Hovering reveals detailed statistics via a tooltip, while clicking a box highlights that state. The data originates from the @oabouhas/unemployment package, and the visualization renders as an SVG with animated transitions.

78% match

US Unemployment Rate Histogram

This chart displays the distribution of unemployment rates across U.S. states in 2022 using a histogram with bars colored by rate via an inferno color scale. It employs the `d3.bin` and `scaleLinear`/`scaleQuantile` APIs to bin data and map colors, with `axisBottom`/`axisLeft` for axes. Each bar shows counts of states per bin, and hovering highlights a bar and reveals a tooltip. Data comes from the `@oabouhas/unemployment` package.

78% match

Unemployment Rate Heatmap

This interactive heatmap shows monthly unemployment rates for selected U.S. states, with darker blue cells indicating higher rates and a vertical legend mapping the discrete color thresholds. Hovering over any cell reveals a tooltip with the state, month, and exact unemployment percentage. The visualization is built using d3.scaleBand for the axes, d3.scaleThreshold for the color encoding, and SVG rectangles rendered with D3. Data comes from the "Unemployment in America Per US State" GitHub dataset, with states sorted by descending unemployment rate.

Map of unemployment rate in the US

This visualization displays a map of the contiguous United States with red circles overlaid on each state, sized proportionally to a fake unemployment rate dataset. The map is rendered using D3’s `geoAlbersUsa` projection and `geoPath` to draw state boundaries from a TopoJSON file. Circle positions are computed with `geoCentroid` and scaled using `scaleSqrt`, with data loaded asynchronously from the us-10m atlas. The SVG output shows both the static gray state shapes and semi-transparent bubbles representing relative unemployment figures.

Unemployment in America Per US State

This example visualizes unemployment rates for US states, territories, and metropolitan areas from 1976 onward, with data parsed from a CSV file. It allows comparison of rates across states and analysis of trends over time, highlighting areas with high or low unemployment. The code imports the dataset, strips commas from numeric fields, and converts them to numbers. It then uses JavaScript to display the first data entry as formatted JSON in a pre element, with font size set programmatically. No external visualization libraries are used, relying instead on native DOM manipulation.

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.