Skip to main content
SimilarExport ZIP
100%

Simple US County Map

✓ Published2🌍 Public
CCurran Kelleher
Last edited Aug 15, 2024
Created on Aug 11, 2024
Forked from Simple World Map

This example displays a map of US counties rendered as a collection of white-stroked polygons. It fetches TopoJSON data from the us-atlas CDN, converts it to GeoJSON using `topojson-client`’s `feature` function, and projects it with `geoAlbersUsaTerritories` from the `geo-albers-usa-territories` library. The map is drawn using `d3.geoPath` within a dynamic SVG container that resizes to the window, with state management driving the asynchronous data loading.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

MMTClass
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.
85% match
Loading thumbnail…

US States Map

This example renders a geographic map of US states using D3 and TopoJSON, loading data from the us-atlas TopoJSON file. It draws each state with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, which includes US territories. State boundaries appear as white strokes overlaid via a TopoJSON mesh, while the map updates reactively through the `d3-rosetta` StateProperty pattern. The visualization highlights the separation between states and provides a clean, basic template for choropleth or interaction extensions.

CCurran Kelleher
84% 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
84% match
Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey
83% 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
83% match
Loading thumbnail…

US Counties

This visualization displays the boundaries of every county in the United States, along with state lines and a stylized national outline with a drop-shadow effect. The map uses an Albers equal-area conic projection via `d3.geoAlbersUsa()` and renders GeoJSON paths with `d3.geoPath()`. It employs the TopoJSON client to convert TopoJSON data from a GitHub-hosted file into features, and uses SVG elements with blur filters for the shadow.

MMTClass
83% match
Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock
83% match