Skip to main content
SimilarExport ZIP
100%

Azimuthal (Orthographic) Projection

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jun 4, 2012

This visualization displays world country boundaries using an azimuthal orthographic projection, creating a globe-like view with a 90-degree clip angle. The map renders as SVG paths with gray fills and white strokes. The code loads geographic data from countries.json and projects it using d3.geo.orthographic() and d3.geo.path() from D3 v3.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock
82% match
Loading thumbnail…

Polar Azimuthal Equal-area

This example visualizes the Earth using the polar azimuthal equal-area projection, with landmasses in black and country boundaries in white against a graticule. The map is centered on the North Pole and rendered as an SVG, with a sphere outline and fill. The code uses `d3.geo.azimuthalEqualArea()` for the projection and `d3.geo.path()` to draw features from a TopoJSON world dataset loaded via `d3.json`.

Mmbostock
79% match
Loading thumbnail…

AzimutalMap

This example shows a world map projected using the Bertin 1953 projection, rendered as an SVG with a white sphere background and interactive country outlines. Hovering over a country changes its fill color to red. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them using `topojson.feature`. It then applies the `d3.geoPath` generator with the `d3.geoBertin1953` projection to draw each path, and relies on `d3.select` and SVG elements for rendering.

Hhanulik.ondrej@gmail.com
78% match
Loading thumbnail…

Lambert Azimuthal Equal-Area

This example visualizes world landmasses and country boundaries using a Lambert azimuthal equal-area projection, centered on the globe to produce a circular map. The graticule and sphere outline frame the map, while land is filled dark against a light background. Built with D3 v4, it uses `d3.geoAzimuthalEqualArea` for projection, `d3.geoPath` for rendering shapes, and `d3.geoGraticule` for the grid, pulling geographic data from a world-50m JSON dataset via `topojson`. The SVG output is styled with CSS classes for land, boundaries, and graticule.

Mmbostock
78% match
Loading thumbnail…

Azimuthal Equidistant

This example uses D3 version 3 to create an azimuthal equidistant projection centered on New York City. It draws graticule rings at constant distances from that origin using `d3.geo.circle` and projects them with `d3.geo.azimuthalEquidistant`. The map renders world landmasses and country boundaries from a TopoJSON source, presenting the Earth’s surface as a set of concentric distance rings with a white boundary overlay.

Mmbostock
77% match
Loading thumbnail…

Orthographical World Map

This example shows an interactive orthographic projection of the world map, where each country is rendered as an orange SVG path with black borders and darkens on hover. The visualization uses D3 v5’s `geoOrthographic` projection with `geoPath` to draw country boundaries, and TopoJSON’s `feature` method to extract geometries from the world-atlas 110m dataset. Country names are joined from an accompanying TSV file and displayed via SVG `<title>` tooltips.

Tthanhtrant219
77% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as filled beige shapes against a light blue sphere, using an azimuthal equal-area projection. It loads GeoJSON country boundaries from the world-atlas dataset via TopoJSON and draws them as SVG paths with d3.geoPath. The code applies d3.geoAzimuthalEqualArea for projection, sets stroke opacity for country borders, and uses D3 v5 with topojson.feature to extract geometries.

Hhappymail6
77% match
Loading thumbnail…

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Mmbostock
76% match