Svelte + D3: Map with GeoJson

100%

Svelte + D3: Map with GeoJson

✓ Published0🌍 Public

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte + D3: Map on canvas with zoom on click

This example shows a map of US counties rendered on two stacked HTML canvas elements using Svelte and D3. Clicking a county zooms into it smoothly via a tweened zoom transform, while the visible canvas displays aquamarine paths and a hidden canvas uses color-picking with `getImageData` for accurate hover detection. The map data comes from a GeoJSON file via `d3.json`, with `d3.geoAlbersUsa` and `d3.geoPath` generating the projection and paths. Pressing Escape resets the view.

MMatthias Stahl

88% match

Loading thumbnail…

Svelte + D3: Map (with visible hidden canvas) on canvas with zoom on click

This example displays a map of US counties rendered on two stacked HTML5 canvas layers, with a visible stroke layer atop a hidden color-picking layer. Clicking a county smoothly zooms in via a tweened `zoomIdentity` transform, and pressing Escape resets the view. The code uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoomIdentity` for projection and scaling, while mouse picking relies on Canvas `getImageData` from the hidden layer. County outlines come from a GeoJSON dataset, and hover effects animate opacity through Svelte transitions.

MMatthias Stahl

86% match

Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.

83% match

Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays an interactive map of U.S. counties rendered as SVG paths, with each county’s name appearing as a tooltip on hover. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5, while TopoJSON’s `feature` method extracts county geometries from the us-atlas counties-10m.json dataset. Hovering highlights the county in green via a CSS `:hover` rule. The visualization depends on D3’s `select` and `json` utilities to fetch and bind the geographic data.

NNita

82% match

Loading thumbnail…

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

CChase Hall

82% match

Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita

82% match

Loading thumbnail…

Let's make a map US-counties with D3.js!

This example renders a choropleth-style map of all US counties as light green SVG paths with subtle black borders. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` generator to convert TopoJSON county boundaries from the `us-atlas` dataset into scalable vector graphics. The code loads the TopoJSON via `d3.json`, extracts features with `topojson.feature`, and binds them to SVG path elements, while styling is handled with CSS class selectors.

NNita

82% match

Loading thumbnail…

US Map practice

This example shows a static map of US counties and state boundaries rendered in SVG, with each county path filled in grey and state interior borders drawn in a distinct teal color. The visualization uses D3 v5’s `geoPath` with a `geoIdentity` projection that applies `reflectY(true)` to flip the map vertically. React components load TopoJSON from the US Atlas package (`counties-albers-10m.json`), converting it to GeoJSON features via `feature` and `mesh` from TopoJSON, then fitting the projection to a 960×500 viewport with `fitExtent`. The map includes county polygons and state outline meshes, with styling defined in an external CSS file.

AAndre J Denais

81% match