Skip to main content
100%

US Counties

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 17, 2017
Created on Feb 5, 2017

US Counties visualizes county boundaries across the United States using a TopoJSON topology file rendered as an SVG with D3 v4. The map displays all US counties as individual paths, with geographic features drawn from arcs in the counties.json TopoJSON data source. The visualization uses a standard SVG rendering approach, allowing for crisp vector county outlines that can be scaled and interacted with.

AI-generated description

Based on a stack overflow question.

The json in this example is not projected, aka it uses a WGS84 spatial reference system and thus is measured in latitudes and longitudes and able to be projected by d3.projection.

The composite nature of the AlbersUsa projects Hawaii and Alaska differently than the rest of the country.

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
89% 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
89% 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
88% match
Loading thumbnail…

US Counties

This example shows a map of all US counties and state boundaries, rendered with a drop-shadow effect for visual depth. It displays the nation’s outline, state lines, and individual county borders using SVG paths. The code uses D3 v4’s `d3.geoAlbersUsa()` projection and `d3.geoPath` to draw the geography, while TopoJSON’s `topojson.feature`, `topojson.merge`, and `topojson.mesh` convert the county data from the provided JSON. A blurred filter and layered `use` elements create the shadow effect.

MMTClass
87% match
Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis
87% match
Loading thumbnail…

US State with County v4

This interactive map displays all US states and their counties using D3 v4 with SVG rendering. The visualization loads TopoJSON geographic data for county and state boundaries, along with CSV files that provide names for both administrative levels. Counties are rendered as white polygons with grey borders, while state boundaries are highlighted with a thick steelblue stroke. Hovering over any county turns it red, thickens its border, and displays a tooltip showing the county name and state, positioned to follow the mouse cursor. The map uses a queue to load the three data files, and a geoPath projection renders the TopoJSON features.

Aabrahamdu
86% match
Loading thumbnail…

US Counties

This example displays a choropleth map of every county in the United States, using the USCounties.json TopoJSON file from the gist repository by NPashaP. It shows the geographic boundaries and locations of each county, including territories like Aleutians East Borough in Alaska and Charlottesville city in Virginia. The visualization is rendered using the d3.geoPath API to project and draw the TopoJSON topology onto a canvas, with the d3.forceSimulation or similar force-directed layout not applied here—instead, the arcs and polygons are directly encoded into paths. The map relies on the geometry collection and property data (GEOID10, NAMELSAD10, INTPTLAT10, INTPTLON10) to place each county accurately.

NNPashaP
86% match
Loading thumbnail…

d3 + TopoJSON

This example displays a map of U.S. counties rendered as SVG paths, with each county filled in light gray and outlined in white. Hovering over a county turns it red. The visualization loads a TopoJSON file from a GitHub gist, converts it to GeoJSON using the `topojson.feature` method, and draws the features with `d3.geo.path()` in D3 v3. The map uses the default projection provided by D3’s geographic path generator.

AAlan McConchie
85% match