At the beginning of the week, I read an interesting article about how our head would look like on a projected map.
I thought directly on the cool projections that are possible with D3! So I looked around, found nice examples:
And now ... Angela Merkel gives you an idea on the distortions, by providing her head. Thank you for that! image source
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #222; | |
| } | |
| #heading{ | |
| font-size:24px; | |
| color:#fff; | |
| } | |
| </style> | |
| <body> | |
| <p id='heading'></p> | |
| <select id="projection-menu"></select> | |
| <div id='projectMerkel'></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script> | |
| var options = [ | |
| {name: "Aitoff", projection: d3.geo.aitoff()}, | |
| {name: "Albers", projection: d3.geo.albers().scale(145).parallels([20, 50])}, | |
| //{name: "August", projection: d3.geo.august().scale(60)}, | |
| {name: "Baker", projection: d3.geo.baker().scale(100)}, | |
| {name: "Boggs", projection: d3.geo.boggs()}, | |
| {name: "Bonne", projection: d3.geo.bonne().scale(120)}, | |
| {name: "Bromley", projection: d3.geo.bromley()}, | |
| {name: "Collignon", projection: d3.geo.collignon().scale(93)}, | |
| {name: "Craster Parabolic", projection: d3.geo.craster()}, | |
| {name: "Eckert I", projection: d3.geo.eckert1().scale(165)}, | |
| {name: "Eckert II", projection: d3.geo.eckert2().scale(165)}, | |
| {name: "Eckert III", projection: d3.geo.eckert3().scale(180)}, | |
| {name: "Eckert IV", projection: d3.geo.eckert4().scale(180)}, | |
| {name: "Eckert V", projection: d3.geo.eckert5().scale(170)}, | |
| {name: "Eckert VI", projection: d3.geo.eckert6().scale(170)}, | |
| //{name: "Eisenlohr", projection: d3.geo.eisenlohr().scale(60)}, | |
| {name: "Equirectangular (Plate Carrée)", projection: d3.geo.equirectangular()}, | |
| {name: "Hammer", projection: d3.geo.hammer().scale(165)}, | |
| {name: "Hill", projection: d3.geo.hill()}, | |
| {name: "Goode Homolosine", projection: d3.geo.homolosine()}, | |
| {name: "Kavrayskiy VII", projection: d3.geo.kavrayskiy7()}, | |
| {name: "Lambert cylindrical equal-area", projection: d3.geo.cylindricalEqualArea()}, | |
| {name: "Lagrange", projection: d3.geo.lagrange().scale(120)}, | |
| {name: "Larrivée", projection: d3.geo.larrivee().scale(95)}, | |
| {name: "Laskowski", projection: d3.geo.laskowski().scale(120)}, | |
| {name: "Loximuthal", projection: d3.geo.loximuthal()}, | |
| {name: "Mercator2", projection: d3.geo.mercator().scale(490 / 2 / Math.PI)}, | |
| {name: 'Mercator', projection: d3.geo.mercator()}, | |
| {name: "Miller", projection: d3.geo.miller().scale(100)}, | |
| {name: "McBryde–Thomas Flat-Polar Parabolic", projection: d3.geo.mtFlatPolarParabolic()}, | |
| {name: "McBryde–Thomas Flat-Polar Quartic", projection: d3.geo.mtFlatPolarQuartic()}, | |
| {name: "McBryde–Thomas Flat-Polar Sinusoidal", projection: d3.geo.mtFlatPolarSinusoidal()}, | |
| {name: "Mollweide", projection: d3.geo.mollweide().scale(165)}, | |
| {name: "Natural Earth", projection: d3.geo.naturalEarth()}, | |
| {name: "Nell–Hammer", projection: d3.geo.nellHammer()}, | |
| {name: "Polyconic", projection: d3.geo.polyconic().scale(100)}, | |
| {name: "Robinson", projection: d3.geo.robinson()}, | |
| {name: "Sinusoidal", projection: d3.geo.sinusoidal()}, | |
| {name: "Sinu-Mollweide", projection: d3.geo.sinuMollweide()}, | |
| {name: "van der Grinten", projection: d3.geo.vanDerGrinten().scale(75)}, | |
| {name: "van der Grinten IV", projection: d3.geo.vanDerGrinten4().scale(120)}, | |
| {name: "Wagner IV", projection: d3.geo.wagner4()}, | |
| {name: "Wagner VI", projection: d3.geo.wagner6()}, | |
| {name: "Wagner VII", projection: d3.geo.wagner7()}, | |
| {name: "Winkel Tripel", projection: d3.geo.winkel3()} | |
| ]; | |
| var menu = d3.select("#projection-menu") | |
| .on("change", change); | |
| menu.selectAll("option") | |
| .data(options) | |
| .enter().append("option") | |
| .text(function(d) { return d.name; }); | |
| function change(d){ | |
| console.log(options[this.selectedIndex].projection) | |
| location.hash=this.selectedIndex; | |
| location.reload(); | |
| } | |
| var width = 960, | |
| height = 500; | |
| if(location.hash=='')var index = 14; | |
| else {var index=location.hash.replace('#',''); } | |
| //console.log(options[index].name) | |
| var projection = options[index].projection;//d3.geo.sinusoidal(); | |
| d3.select('#heading').text("Angela Merkel projected to " + options[index].name) | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var canvas = d3.select("#projectMerkel").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var context = canvas.node().getContext("2d"); | |
| var image = new Image; | |
| image.onload = onload; | |
| image.src = "image.jpg"; | |
| function onload() { | |
| var dx = image.width, | |
| dy = image.height; | |
| context.drawImage(image, 0, 0, dx, dy); | |
| var sourceData = context.getImageData(0, 0, dx, dy).data, | |
| target = context.createImageData(width, height), | |
| targetData = target.data; | |
| for (var y = 0, i = -1; y < height; ++y) { | |
| for (var x = 0; x < width; ++x) { | |
| var p = projection.invert([x, y]), λ = p[0], φ = p[1]; | |
| if (λ > 180 || λ < -180 || φ > 90 || φ < -90) { i += 4; continue; } | |
| var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2; | |
| targetData[++i] = sourceData[q]; | |
| targetData[++i] = sourceData[++q]; | |
| targetData[++i] = sourceData[++q]; | |
| targetData[++i] = 255; | |
| } | |
| } | |
| context.clearRect(0, 0, width, height); | |
| context.putImageData(target, 0, 0); | |
| } | |
| </script> |
