Skip to main content
SimilarExport ZIP
100%

Bar chart

✓ Published1🌍 Public
YYaya Liu
Last edited Feb 8, 2021
Created on Feb 3, 2021
Forked from Hello VizHub

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.

AI-generated description

This bar chart shows 10 states have the highest record of unemployment rates at December 2020.

Data is from https://www.bls.gov/web/laus/laumstrk.htm Last Modified Date: January 26, 2021

MIT Licensed

Similar vizzes

Loading thumbnail…

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

Untitled

This interactive stacked bar chart displays unemployment data across U.S. states for different years, with a dropdown menu to select the year and a checkbox to toggle sorting by total value. The visualization uses D3 v5 to render SVG elements with smooth transitions between states, animating bar positions and heights over 750 milliseconds. Data is loaded from a CSV file, and the chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal to assign category colors. Stacked segments are created using d3.stack, with labels showing each state's total.

Yyc4004
77% match
Loading thumbnail…

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

Fork of Stylized Bar Chart

This example displays the average unemployment rate for the top 10 most populous countries, rendered as a horizontal stylized bar chart with an SVG output using React. The chart uses d3.scaleBand and d3.scaleLinear to map countries and values, while d3.format formats tick labels. Data comes from the United Nations World Population Prospects 2019. Blue bars include a native SVG `<title>` element for tooltips, and loading states show "Loading..." via React hooks and the `useData` custom hook.

AAvonlea Fisher
74% match
Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Mmariahdiaz
74% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

AAllen Ho
73% match
Loading thumbnail…

Bar chart - covid19

This bar chart displays the total number of Covid-19 cases in the top five US states as of January 12, 2021, sourced from Worldometer. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, and d3.axisBottom/axisLeft APIs to map case counts to bar lengths and states to vertical bands. Each state’s bar is rendered as an SVG rect with a green fill, while the horizontal and vertical axes provide numerical and categorical reference points. The chart is built with D3 v6 and renders entirely as SVG elements.

BbeauMarko
72% match
Loading thumbnail…

Bar Chart

This bar chart displays the top 10 companies with the highest number of laid-off employees, sourced from a CSV file. It uses React for component management and D3 v5 for rendering an SVG with scaleBand and scaleLinear axes. The bars are colored with a blue gradient based on index, and the data is sorted in descending order to emphasize the largest layoffs.

Kkartheekgurijala2023@gmail.com
72% match