Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte + D3: Map with GeoJson

Public visualization

Svelte + D3: Map with GeoJson

1 star1🌍 Public
MMatthias Stahl
Last edited Nov 26, 2025
Created on Feb 7, 2024

This example displays a map of US counties using GeoJSON data, rendered as SVG paths with a steelblue fill. It uses D3’s `geoAlbersUsa` projection and `geoPath` to convert geographic coordinates into screen paths, with the map fitted to the container’s dimensions. Hovering over a county increases its opacity from 0.5 to 1 via a CSS class toggle, creating a subtle interactive highlight. The data comes from Plotly’s `geojson-counties-fips` dataset, loaded asynchronously with D3’s `json` method.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed