Skip to content

Instantly share code, notes, and snippets.

Forked from mbostock/.block
Last active Oct 21, 2018
What would you like to do?
Polar Azimuthal Equal-area
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
body {
background: #fcfcfa;
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
.fill {
fill: #fff;
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
.land {
fill: #222;
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
<script src="//"></script>
<script src="//"></script>
var width = 960,
height = 960;
var projection = d3.geo.azimuthalEqualArea()
.rotate([0, -90])
.clipAngle(180 - 1e-3)
.translate([width / 2, height / 2])
var path = d3.geo.path()
var graticule = d3.geo.graticule();
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
.attr("class", "fill")
.attr("xlink:href", "#sphere");
.attr("class", "graticule")
.attr("d", path);
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});"height", height + "px");
Copy link

QuLogic commented Nov 2, 2014

I just came across this example, and wanted to point out that the United Nations logo is not azimuthal equal-area. It's azimuthal equidistant as noted in its description:

a map of the world representing an azimuthal equidistant projection centred on the North Pole, inscribed in a wreath ... The projection of the map extends to 60 degrees south latitude, and includes five concentric circles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment