|
<!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> |