U.S. Unemployment in 2017

Metis Simple Stacked Bar Chart with Labels

This example displays 2017 U.S. unemployment rates as a simple horizontal bar chart, with states sorted descending by rate and each bar labeled with its numeric value using SVG text. D3 v4 selects elements, binds CSV data, and uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The code also demonstrates grouping with `d3.nest()` and computes average rates per region and subregion using `rollup()`. The chart is rendered as an SVG element within a 960x500 canvas.

EElaineYu

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.

Bar Chart: Unemployment Rates by State

This bar chart visualizes unemployment rates across a selection of U.S. states, using a sequential blue color scale where darker bars indicate higher rates. The chart includes rounded bars with drop shadows, a dynamic tooltip showing state and rate on hover, and a vertical gradient legend. Built with D3.js, the visualization uses `scaleBand`, `scaleLinear`, `scaleSequential`, `interpolateBlues`, `axisBottom`, and `axisLeft` to structure the axes and color mapping. Gridlines and labeled axes enhance readability, while the embedded data contains hardcoded state unemployment percentages.

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.

Bar chart

This bar chart displays the top 10 states with the highest unemployment rates as of December 2020, ranging from Hawaii at 9.3% to New Jersey at 7.6%. The data comes from the U.S. Bureau of Labor Statistics. Using d3.csv, d3.scaleLinear, and d3.scaleBand, the visualization renders horizontal bars in SVG, with axes generated by d3.axisLeft and d3.axisBottom. The chart applies a percentage format to the x-axis ticks and includes hover effects that change bar color and opacity.

YYaya Liu

77% match

Fork of Bar Chart: Unemployment Rates by State

This chart displays the top 10 U.S. states by unemployment rate for 2022, using a horizontal bar layout where each bar’s color intensity reflects the rate. Sorted descending, the visualization highlights state rankings with percentage labels and a gradient legend. It filters source data, aggregates by state, and relies on d3-scaleBand, d3-scaleLinear, and d3-scaleSequential with interpolateBlues for encoding. Axes are generated via d3-axis, while hover tooltips and event listeners add interactivity. The data originates from the `@oabouhas/unemployment` package.

76% match

Histogram

This histogram displays the distribution of unemployment rates across U.S. counties as of August 2016, using data from the Bureau of Labor Statistics. It shows the frequency of counties falling into different rate intervals, with the tallest bars indicating the most common unemployment levels. The visualization uses D3’s `bin` and `scaleLinear` APIs to group the data into 40 bins and map those bins to screen coordinates. Each county’s rate is loaded from a CSV file and cast to a number before being passed to the histogram component, which renders SVG rectangles for each bin.

CCurran Kelleher

75% match