Gist 11520211

100%

✓ Published0🌍 Public

Last edited May 4, 2014

Created on May 4, 2014

This example visualizes the geographic boundaries of US states and counties using a TopoJSON file that encodes land, county, and state outlines. Built with D3, it renders the map from the `us.json` TopoJSON data, which contains geometry collections for counties and states. The visualization likely uses D3's projection and path generators to draw the geographic shapes, displaying the boundaries with distinct styling for counties and states. The minimal code structure suggests a basic interactive or static map, with the data provided in a structured TopoJSON format.

AI-generated description

Data directory for my bl.ocks.

us.json - US states, counties and land boundaries

Similar vizzes

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

87% 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

85% 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

84% match

Loading thumbnail…

TopoJSON via MapBox & Leaflet

This example shows a map of the United States with county boundaries rendered as vector shapes, overlaid on a zoomable and pannable MapBox tile layer. It combines D3.js and TopoJSON to load and parse county geometries from a remote GeoJSON-like file, then uses MapBox’s Leaflet-based `L.geoJson` to display them with a simple gray outline style. The map initializes at a low zoom level, and the counties are added as a single layer after asynchronous JSON retrieval, demonstrating integration between D3’s data handling and Leaflet’s mapping API.

CCaged

84% match

Loading thumbnail…

us2.json

This example displays county boundaries from the US Census Bureau using a TopoJSON file. It renders the geometries onto an SVG or Canvas element with the D3.js library, employing `d3.geoPath` to project and draw the polygons. The visualization is interactive, allowing users to pan and zoom across the map. The code initializes a map projection and fits the path generator to the geographic extent defined in the TopoJSON metadata.

JJn1532

84% 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

84% match

Loading thumbnail…

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

PPhilippe Rivière

82% match

Loading thumbnail…

test

This example displays a choropleth map of the United States, rendering counties and states as colored vector paths. The visualization shows the geographic boundaries of counties, states, and the national outline using a green fill for county areas. Built with D3 v4 and the topojson-client library, it loads US Atlas TopoJSON data and applies projection with `d3.geoPath`. The code distinguishes regions by filtering counties into their respective states and traces state and national borders with distinct stroke widths.

AAnaMal08

82% match