Pie Chart unemployment across various U.S. states.

Pie Chart

This pie chart visualizes the unemployment rate across US states, displaying the top 10 states with the highest rates. The chart uses D3.js v5 version's `pie` and `arc` functions to generate SVG path segments, with each state represented by a colored slice. A legend on the right lists each state, its corresponding color, and the unemployment rate in US dollars. The data is loaded from a CSV file hosted on GitHub Gist, processed using D3's `csv` and `scaleOrdinal` functions.

AAmruthaVee

87% 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.

80% match

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.

Pie Chart

This pie chart visualizes the population distribution across U.S. states, using a categorical color scale for each state. The D3.js code loads CSV data from a Gist, calculates each state's share via the `pie` layout, and renders SVG slices with `arc` paths. A legend translates each sector's value into abbreviated format (e.g., "K" for thousands), while the chart is generated with `scaleOrdinal` for colors and D3's `format` for tick labels.

Pprajoth0405

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.

Pie Chart

This pie chart visualizes population figures for US states, displaying each state as a colored slice with its population value labeled in millions. The chart uses d3.pie() to compute angular segments and d3.arc() with an inner radius of zero to generate the SVG paths. A legend is rendered to the right, mapping each state name to its corresponding color and population value. The data is loaded as CSV from a GitHub gist, and colors are assigned using d3.scaleOrdinal() with a predefined array of ten distinct colors.

Hharika-1929

Pie chart

This interactive pie chart visualizes age-group distributions for six U.S. states, toggling between "apples" and "oranges" datasets via radio buttons. Built with D3.js v5, it uses `d3.pie` to compute arc angles, `d3.arc` for rendering donut segments, and `transition.attrTween` with an arc interpolation function to animate updates smoothly. A legend of colored dots and labels appears alongside the chart, with each state’s age categories mapped to a categorical color scale. The data loads from a local JSON file, and the SVG renders with styled strokes and transitions.

FfaRriaN

77% match

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.