Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of bubble chart

Public visualization

Viewing a saved revision (read-only)

52c63ebec9da4811a36d47c8ae34772d

Fork of bubble chart

0 stars0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Nov 18, 2024
Created on Nov 7, 2024

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.

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