JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<body></body>

CSS

background: #222;

JavaScript

var scale = 1,
    radius = 150;
var width = 300,
    height = 300;

var projection = d3.geo.aitoff().scale(45).translate([150, 100]).rotate([0, 0])

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var image = new Image();
image.onload = onload;
image.crossOrigin = "anonymous";
image.src = "https://dl.dropboxusercontent.com/s/tqxbiw17giwywva/download.png";

function onload() {
    var dx = image.width,
        dy = image.height;
    context.clearRect(0, 0, width, 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.putImageData(target, 0, 0);
}

var zoom = d3.behavior.zoom()

    .center([width / 2, height / 2])
    .on("zoomstart", function () {
    m0 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];
    var proj = projection.rotate();
    o0 = [-proj[0], -proj[1]];
    d3.event.sourceEvent.stopPropagation();
})
    .on("zoom", function () {
    if (m0) {
        var constant = (scale < 4) ? 4 : scale * 2;
        var m1 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY],
            o1 = [o0[0] + (m0[0] - m1[0]) / constant, o0[1] + (m1[1] - m0[1]) / constant];
    }
    rotate = [-o1[0], -o1[1]];
  ...