Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

heatmap

Public visualization

Viewing a saved revision (read-only)

90a7e916a9fd45d1a1db68df1bb550f6

heatmap

0 stars0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Oct 2, 2024
Created on Oct 1, 2024

This example displays state-level unemployment data on a map of the United States, using colored circles overlaid on geographic boundaries. The visualization loads US TopoJSON data and employs d3.geoAlbersUsa projection with d3.geoPath to render state shapes, while d3.scaleSequential with interpolateBlues colors each circle based on its unemployment rate. Interactive hover effects reveal tooltips showing the specific state name and percentage.

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