Skip to main content
SimilarExport ZIP
100%

Border Mesh

✓ Published0🌍 Public
Mmbostock
Last edited Jan 26, 2017
Created on Jan 26, 2017

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.

AI-generated description

This example uses topojson.mesh to highlight California’s borders with its three neighboring states.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Mmbostock
77% match
Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei
76% match
Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock
76% match
Loading thumbnail…

US State Boundaries

This example displays a static map of US state boundaries rendered as SVG paths, using React for component structure and D3’s `geoPath` and `geoIdentity` projection to draw the geographic features. The data comes from the `us-atlas` TopoJSON file `states-albers-10m.json`, converted to GeoJSON via TopoJSON’s `feature` method. State shapes are filled with a gray tone and outlined in teal, creating a clean reference view of the country’s administrative subdivisions.

MMartin Blatz
76% 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
76% match
Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham
75% match
Loading thumbnail…

California Map

This example renders a map of California using D3.js and TopoJSON data from the US Atlas. The code loads the states-10m.json file, filters the TopoJSON to extract the California geometry, and applies a d3.geoAlbersUsa projection fit to the state’s bounds. A d3.geoPath generator then draws the resulting SVG path element, displaying the state’s outline at a 960×500 resolution. The visualization demonstrates importing D3 via UNPKG and using topojson-client to convert geographic features.

Aaniteshterala2000
75% match
Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Rrakeshkommineni
75% match