Challenge

Unemployment Rate vs Population Scatter Plot

This animated scatter plot visualizes the relationship between total population and unemployment rate across US states over time, using data from the Unemployment in America Per US State CSV dataset. D3.js constructs the visualization with a symlog scale for population on the x-axis and a linear scale for unemployment rate on the y-axis. The code draws circles for each state-year observation, colored lines connecting points per state via `scaleOrdinal` and `line`, and includes hover tooltips. The rendering employs D3 selections, transitions, axes via `axisLeft` and `axisBottom`, and `flatGroup` for state grouping.

85% match

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.

81% match

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.

79% match

Ssivaparchuri2000@gmail.com

Fork of scatter plot

This scatter plot visualizes population by U.S. state, with each state represented as a circle positioned along a categorical x-axis and a linear y-axis scaled to population values. The code loads CSV data via d3.csv, converts population strings to numbers, and renders circles using d3.scaleBand and d3.scaleLinear for axes. Circles are appended to an SVG container with fixed coordinates computed from the scales, using a steelblue fill and a 5-pixel radius. The visualization highlights population disparities across states while maintaining a simple, readable layout.

79% match

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.

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.

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.

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.