Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active Oct 21, 2018
Embed
What would you like to do?
Polar Azimuthal Equal-area
license: gpl-3.0
redirect: https://beta.observablehq.com/@mbostock/d3-azimuthal-equal-area
<!DOCTYPE html>
<meta charset="utf-8">
<style>
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;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 960;
var projection = d3.geo.azimuthalEqualArea()
.scale(237)
.rotate([0, -90])
.clipAngle(180 - 1e-3)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.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")
.datum(topojson.feature(world, world.objects.land))
.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);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
@QuLogic
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