Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart: Unemployment Rates by State

Public visualization

Viewing a saved revision (read-only)

f537a3dd452244308c113879db5c3cc7

Bar Chart: Unemployment Rates by State

0 stars3🌍 Public
Oomniaabouhassan@gmail.com
Last edited Dec 4, 2024
Created on Sep 25, 2024

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.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations