Coastal Graph Distance

100%

Coastal Graph Distance

✓ Published0🌍 Public

Last edited Dec 24, 2019

Created on Mar 24, 2014

This map shows the graph distance of each US county from the Pacific or Atlantic coast, with coastal counties in dark blue and counties nine or more counties away in light yellow. It recreates a Reddit map using TopoJSON. The code calculates distances by iteratively expanding from coastal counties, using `d3.queue` to load the US GeoJSON and TSV data, `topojson.neighbors` for adjacency, and `d3.geoPath` to render SVG paths with a color scale from `d3.scaleOrdinal`.

AI-generated description

This map shows the graph distance of each county from the Pacific or Atlantic coast; it is a recreation of a map posted to /r/dataisbeautiful using TopoJSON. Coastal counties are dark blue, while counties nine or more counties away from the coast are light yellow. (I opted not to reuse the original’s cycling color scale.)

Similar vizzes

Loading thumbnail…

Coastal Graph Distance II

This map of US counties visualizes graph distance from coastal counties. The animation cycles a rainbow color scale based on each county's distance. The visualization uses d3.js version 3, the topojson library for geographic data, and a queue library for asynchronous loading. The color of each county is set using `d3.hsl` based on the distance value, resulting in a rapidly changing, high-saturation effect.

Mmbostock

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

75% match

Loading thumbnail…

Border Distance

This visualization shows the distance from any point in the contiguous United States to the nearest border or coastline, using a sequence of concentric buffer strokes around the landmass. It approximates geographic distance by applying stroke widths in projected pixel coordinates, which the author notes is not perfectly accurate. The map is rendered with D3 v3, using `d3.geo.albersUsa` for projection and `d3.geo.path` to draw land and state borders from TopoJSON data. A color scale maps nine distance bands from yellow (near) to dark blue (far).

Mmbostock

74% match

Loading thumbnail…

County Topology

This graph shows the topology of U.S. counties as a network, where each node sits at a county centroid and links connect neighboring counties that share borders. The visualization uses simplified geometry from a TopoJSON file, rendering the nation and county boundaries as SVG paths via `d3.geoPath`. Node positions come from path centroids, while neighbor relationships derive from `topojson.neighbors` on the county geometries. Edges are drawn as straight lines between connected centroids, overlaid on the map to reveal adjacency patterns across the country.

Mmbostock

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

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

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

71% match

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

71% match