Border Distance

100%

Border Distance

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 26, 2014

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).

AI-generated description

A quick-and-dirty approximate visualization of distance from the U.S. border or coastline, whichever is closer. Unlike the coastal distance map, this is based on geographic distance rather than graph (topologic) distance.

This map is an approximation because distances shown are measured in projected coordinates (10px) rather than on the surface of the Earth, and no geographic projection preserves distances equally between all pairs of points. A more accurate approach would compute the border buffer shapes in spherical coordinates.

(Also, I’d rather have this map just show distance from the coast rather than the border, but that requires a bit more work, too!)

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Coastal Graph Distance

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`.

Mmbostock

74% match

Loading thumbnail…

Border Mesh

This example highlights California’s borders with its three neighboring states—Nevada, Arizona, and Oregon—using a U.S. states map rendered as SVG. It uses `d3.geoPath()` to draw the states and `topojson.mesh` with a custom filter function to isolate the shared boundary arcs, which are then stroked in cyan, magenta, and yellow. The underlying state geometries come from a TopoJSON file (`us-10m.v1.json`), and the code also adds a faint white stroke for all state boundaries.

Mmbostock

74% match

Loading thumbnail…

Map

This map displays the United States with each state filled in orange on a blue background. Using the Albers equal-area conic projection, the visualization renders state boundaries from the us-atlas TopoJSON dataset via `d3.geoPath` and `topojson.feature`, with the SVG drawn inside a React application. The map uses a thin gray stroke for state borders and is centered within the viewport through a translate transform.

DDINESH SAI BOPPANA

72% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

72% match

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

71% match

Loading thumbnail…

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AAkrutiKhurana2103

71% match

Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

TTejucmandava

71% match

Loading thumbnail…

USA Country Map

This choropleth-style map displays the contiguous United States rendered as an SVG, with each state filled in maroon and state boundaries drawn in black. The visualization uses a React component with the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw the geographic features. State boundaries are created using TopoJSON’s `mesh` function, while the underlying data comes from a remote TopoJSON file served via a GitHub gist. The map is static with no interaction or animation.

SSnigdha6698

71% match