Skip to main content
SimilarExport ZIP
100%

Fork of Line Chart with Multiple Lines Unemployment Rates Comparison

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

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.

AI-generated description

Unemployment Rates Comparison This project visualizes the unemployment rates of selected US states over time using a line chart. The chart includes interactive features and a color-coded legend to indicate which color represents each state.

Features Interactive Line Chart: Hover over the lines to see the state names and highlight the selected line. Color-Coded Legend: A legend on the right side of the chart indicates which color represents each state. Responsive Design: The chart adjusts its size based on the container dimensions.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays unemployment rates for California, Texas, and New York over time, using a multi-line chart where each state is a separate line. The data comes from the `@oabouhas/unemployment` dataset. The code uses d3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render axes and paths, with `d3.groups` to separate lines by state. The chart includes a light gray background, axis labels, and semi-transparent lines for readability.

Oomniaabouhassan@gmail.com
87% 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 Bar Chart: the unemployment rates for 25 random states over 10 years

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.

Oomniaabouhassan@gmail.com
82% 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
81% match
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
80% 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
79% 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
79% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
77% match