Fork of CO2 emissions bubble chart

100%

Fork of CO2 emissions bubble chart

✓ Published0🌍 Public

Last edited Sep 26, 2024

Created on Sep 26, 2024

This interactive map visualization displays unemployment rates across U.S. states, using a blue sequential color scale where darker shades represent higher percentages. Built with D3.js, the code loads state boundaries from GeoJSON via topojson-client, applies the geoAlbersUsa projection, and renders paths using d3.geoPath with fill colors assigned through d3.scaleQuantize. A legend automatically generates color-to-value mappings using the invertExtent method, while the chart title and margin-based layout structure the composition. The visualization demonstrates choropleth mapping with data-driven styling and interactive SVG rendering.

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

Similar vizzes

Loading thumbnail…

US Unemployment Bubble Map

This interactive bubble map visualizes U.S. unemployment rates by state for 2022, with each bubble’s size and color intensity reflecting the unemployment percentage. Users can hover over bubbles to view tooltips with state names and exact rates, while a gradient legend indicates the rate range, and zoom and pan controls allow regional exploration. Built with D3.js, it uses `d3.geoPath` and the `geoAlbersUsaTerritories` projection to render state boundaries, `d3.scaleSqrt` for bubble radii, and `d3.scaleSequential` with `interpolateReds` for coloring. Data comes from the `@oabouhas/unemployment` package, and state centroids are calculated via `d3.geoCentroid` from TopoJSON US Atlas data.

Oomniaabouhassan@gmail.com

84% match

Loading thumbnail…

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.

Oomniaabouhassan@gmail.com

83% match

Loading thumbnail…

Fork of HeatMap:

This visualization displays unemployment rates across US states for the year 2022, rendered as a single-column heatmap using shades of blue. Built with D3 v6, it uses `d3.scaleBand` for the x and y axes, `d3.scaleSequential` with an interpolateBlues color scale, and SVG rectangles for each state cell. Interactive tooltips appear on mouseover using D3's selection API, showing state name, year, and unemployment percentage. Data comes from a CSV file on unemployment per US state.

Oomniaabouhassan@gmail.com

80% match

Loading thumbnail…

heatmap

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.

Oomniaabouhassan@gmail.com

79% match

Loading thumbnail…

Map of unemployment rate in the US

This visualization displays a map of the contiguous United States with red circles overlaid on each state, sized proportionally to a fake unemployment rate dataset. The map is rendered using D3’s `geoAlbersUsa` projection and `geoPath` to draw state boundaries from a TopoJSON file. Circle positions are computed with `geoCentroid` and scaled using `scaleSqrt`, with data loaded asynchronously from the us-10m atlas. The SVG output shows both the static gray state shapes and semi-transparent bubbles representing relative unemployment figures.

Oomniaabouhassan@gmail.com

79% match

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2023 US unemployment rates by state, coloring each state with a sequential scale from the minimum to maximum unemployment values. Hovering over a state reveals a tooltip with its name and unemployment figure. Built with D3.js, it loads unemployment CSV data and US state TopoJSON boundaries, then projects the states using `d3.geoAlbersUsa` and renders them as SVG paths via `d3.geoPath`. The map joins the CSV data to the geometry using a state name-to-FIPS code mapping.

Kkfhujosefsson@dons.usfca.edu

78% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

78% match

Loading thumbnail…

Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes 2024 US state unemployment rates using D3.js v7 and TopoJSON. It shows each state colored on a red-yellow-green sequential scale, where green indicates lower unemployment and red indicates higher rates, with hover interactions revealing exact percentages via a tooltip. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from the us-atlas TopoJSON dataset, while `d3.scaleSequential` with `d3.interpolateRdYlGn` drives the color encoding, and an SVG linear gradient legend communicates the scale.

SSYAM TEJ

78% match