U.S. Counties TopoJSON Mesh

100%

U.S. Counties TopoJSON Mesh

✓ Published0🌍 Public

Last edited Sep 18, 2018

Created on Sep 18, 2018

This example displays a mesh of U.S. county boundaries derived from a TopoJSON shapefile, rendered as a black outline with small circles marking each polygon’s coordinate origin. It uses d3.json to load the TopoJSON data, then topojson.mesh and topojson.transform to build the mesh and map coordinates. The outline is drawn with d3.geoPath, while circles are positioned using the transform function, showing the raw geometry structure rather than a filled choropleth. The data comes from the U.S. Census Bureau via the us-10m.v1.json file, and the visualization renders entirely in SVG.

AI-generated description

A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4090870'>U.S. Counties TopoJSON Mesh</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock

94% 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…

County Topology

This graph displays the topology of U.S. counties, with each node positioned at its county centroid and links connecting neighboring counties that share a border. The visualization uses TopoJSON’s `topojson.neighbors` to identify adjacent counties and `d3.geoPath` to compute centroids from simplified geometry. A background map and white county mesh provide geographic context, while black lines trace the adjacency network. The code loads data from the us-10m.v1.json file and renders entirely in SVG using D3 v4.

FFrissAnalytics

87% match

Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock

86% match

Loading thumbnail…

U.S. TopoJSON

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.

Mmbostock

86% match

Loading thumbnail…

USTopoJSON

This example displays a map of all U.S. counties as thin black outlines, drawn with SVG paths using the `d3.geo.path()` projection. The map is built from a TopoJSON file fetched from a gist, which contains the county geometries. When a user hovers over a county, the CSS `path:hover` rule turns it red, providing a simple interactive highlight. The code relies on D3 v3 and the `topojson.v1` library to process and render the topology data.

JJn1532

84% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

83% match

Loading thumbnail…

U.S. State Mesh

This example visualizes the starting point of every arc in a TopoJSON file of U.S. state boundaries, rendered as a black dot on a mesh of state outlines. It loads the topology from `us.json` and uses `d3.geo.path()` with a `null` projection to draw the mesh. The code then plots each arc's start coordinate as a small circle, applying a custom `transform` function to map the TopoJSON coordinates using the file's `transform.scale` and `transform.translate` values. The visualization highlights how polygon boundaries are decomposed into shared arcs, revealing the topology's underlying structure.

Mmbostock

83% match