Skip to main content
SimilarExport ZIP
100%

Fork of Bar Chart: the unemployment rates for 25 random states over 10 years

✓ Published0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Nov 13, 2024
Created on Nov 13, 2024

This interactive grouped bar chart displays unemployment rates for 25 randomly selected states across 10 randomly chosen years, with each bar color-coded by year and a legend identifying the mapping. Users can select a specific year to view the corresponding rates, and hovering over any bar reveals a tooltip with the exact unemployment percentage for that state and year. The visualization uses D3.js v7 APIs including `scaleBand`, `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, `axisBottom`, `axisLeft`, and `d3.group`, with state management triggering chart updates. Data comes from the @oabouhas/unemployment package.

AI-generated description

The project uses D3.js to create an interactive grouped bar chart that visualizes unemployment rates across different states over multiple years. The chart allows users to select a specific year and view the corresponding unemployment rates for each state.

Features Grouped Bar Chart: Displays unemployment rates for each state, grouped by year. Tooltips: Provides additional information when hovering over bars, showing the exact unemployment rate for the selected year and state. Legend: Indicates the colors corresponding to different years. Hover: Hover over the bars to see the exact unemployment rate for the selected year and state.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart: the unemployment rates for 25 random states over 10 years with a dropDown

This fork of a D3.js bar chart displays unemployment rates for 25 randomly selected states across 10 randomly chosen years. A dropdown menu lets the user select a specific year, dynamically updating the chart to show each state's unemployment percentage for that period. Hovering over a bar reveals a tooltip with the exact rate. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, `axisBottom`, and `axisLeft` to render the chart, with data from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
94% match
Loading thumbnail…

Fork of Bar Chart: the unemployment rates for each state from 1990 to 2010

This interactive grouped bar chart, built with D3.js, visualizes unemployment rates for each state from 1990 to 2010. It shows the percentage of the labor force unemployed per state, with a dropdown menu to select a specific year, dynamically updating the chart’s bars. The visualization uses D3’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` to manage the x, y, and color axes, plus `axisBottom` and `axisLeft` for tick marks. Hovering over a bar reveals a tooltip with the precise rate and year.

Oomniaabouhassan@gmail.com
93% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
89% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
88% 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
84% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines Unemployment Rates Comparison

This visualization compares unemployment rates across ten US states over time using a multi-line chart. Each colored line represents a state, with a legend on the right identifying the color mapping. Hovering over a line highlights it by increasing stroke width and displays the state name near the final data point. The chart uses D3's `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `line` APIs, with responsive axes from `@curran/responsive-axes`. Unemployment rate data originates from the `@oabouhas/unemployment` package.

Oomniaabouhassan@gmail.com
82% match
Loading thumbnail…

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

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.

Oomniaabouhassan@gmail.com
81% match