US, CA, MX and PR

100%

US, CA, MX and PR

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 21, 2013

This example shows a map of the United States, Canada, Mexico, and Puerto Rico using an azimuthal equidistant projection. The code loads a TopoJSON world dataset and filters country geometries by their ISO numeric IDs to isolate the four target regions, drawing them in dark gray against a lighter land mass. It also renders a graticule and international boundaries. The implementation uses d3.geo.azimuthalEquidistant, d3.geo.path, and d3.geo.graticule, with SVG paths generated for land, countries, and boundary meshes.

AI-generated description

In response to a Stack Overflow question. Update: Jason Davies has implemented Airy’s minimum error projection, which is another good choice, particularly if you want to show a wider view.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

us test

This example displays a map of the United States with its states rendered as blue, interactive SVG paths that turn darker on hover. A graticule grid and a gray sphere outline provide geographic context, and the map supports pan and zoom via d3.zoom. The visualization uses d3.geoPath with a null projection to draw raw coordinates from TopoJSON data loaded from the us-atlas package, processed through topojson.feature. Styles are defined in CSS, and the code imports the d3 and topojson libraries.

GGlebenator

78% match

Loading thumbnail…

United States Map

This example displays a world map with countries rendered in light green against a dark blue ocean sphere, using a natural Earth projection. It loads geographic data from the World Atlas TopoJSON dataset via unpkg and converts it to GeoJSON using the `feature` function from Topojson. The visualization leverages D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.json` to project and draw the country boundaries as SVG paths.

SSaurabh Gupta

78% match

Loading thumbnail…

US Country Map

This example displays a static choropleth map of the United States, with all states uniformly filled in red on a light yellow background. Using D3 v4 and TopoJSON, it loads state boundaries from the `us-atlas` dataset and renders them as SVG paths with `d3.geoPath` and the `d3.geoAlbersUsa` projection, which automatically positions Alaska and Hawaii. The code applies stroke styling to delineate state borders, offering a simple baseline for geographic data visualization.

Aavinash021997

78% match

Loading thumbnail…

US Map

This example displays a world map using a Mercator projection, rendering country boundaries as SVG paths from TopoJSON data. The visualization fetches the world-atlas dataset and uses `d3.geoPath` with a `geoMercator` projection to convert geographic coordinates into screen paths. Each country is appended to the SVG as a separate path element. The code relies on D3 v5 and the topojson library to parse and extract country features from the TopoJSON format.

SSrishti2504

77% match

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari

77% match

Loading thumbnail…

Country Map

This example shows a choropleth map of the United States, with each state rendered as a green SVG path on a light blue background. It loads US state boundaries from the us-atlas TopoJSON file and uses the `d3.geoPath` projection with `d3.geoAlbersUsa` to create the map. The code relies on `d3.json` to fetch the data and the `topojson-client` library to convert TopoJSON features into GeoJSON paths for rendering.

KKishen Patel

77% match

Loading thumbnail…

US Map Projection

This example displays a map of the United States using an Albers equal-area conic projection, with the landmass filled in light gray and state boundaries in white. It uses D3.js (d3.v7) with the `d3.geoAlbersUsa()` projection and the `d3.geoPath()` function to render the geographic shapes as SVG paths. The map is drawn within a fixed 960×600 viewport, and the underlying geographic data is handled by the TopoJSON library.

EErik Erickson

77% match

Loading thumbnail…

Albers USA

This example illustrates the Albers USA composite projection by dividing the map into four colored regions, each labeled with the conditional rule that determines which part of the United States it represents. It overlays a world map and graticule to show the geographic context. The visualization uses D3 v3 with `d3.geo.mercator`, `d3.geo.mercator`, `d3.geo.path`, and `d3.geo.graticule` to project and render SVG paths, while the division rectangles and lines are drawn manually to mark the Alaska, Hawaii, Puerto Rico, and lower-48 regions. World land data comes from a remote TopoJSON file.

Mmbostock

77% match