sumatra_tsunami_ortho

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

var div = d3.select('#canvas-image-orthographic'),
            canvas = div.append('canvas')
                .attr('width', width)
                .attr('height', height);

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

// Create and configure the Equirectangular projection
        var equirectangular = d3.geo.equirectangular()
            .scale(width / (2 * Math.PI))
            .translate([width / 2, height / 2]);

// Store the rotation and scale of the projection
        var state = {x: 0, y: 0};

// Create and configure the Orthographic projection
        var projection = d3.geo.orthographic()
            .scale(Math.sqrt(2) * height / Math.PI)
            .translate([width / 4, height / 2])
            .clipAngle(90)
            .rotate([state.x, state.y]);

// Create the image element
        var image = new Image(width, height);
        image.onload = onLoad;
        image.src = 'world.png';

// Copy the image to the canvas context
        function onLoad() {

// Copy the image to the canvas area
            context.drawImage(image, 0, 0, image.width, image.height);

// Reads the source image data from the canvas context
            var sourceData = context.getImageData(0, 0, image.width, image.height).data;

// Creates an empty target image and gets its data
            var target = context.createImageData(image.width, image.height),
                targetData = target.data;

// Iterate in the target image
            for (var x = 0, w = image.width; x < w; x += 1) {
                for (var y = 0, h = image.height; y < h; y += 1) {

// Compute the geographic coordinates of the current pixel
                    var coords = projection.invert([x, y]);

// Source and target image indices
                    var targetIndex,
                        sourceIndex,
                        pixels;

// Check if the inverse projection is defined for the current pixel
                    if ((!isNaN(coords[0])) && (!isNaN(coords[1]))) {

// Compute the pixel coordinates in the source projection
                        pixels = equirectangular(coords);

// Compute the index of the red channel of the source and target pixels
                        sourceIndex = 4 * (Math.floor(pixels[0]) + w * Math.floor(pixels[1]));
                        sourceIndex = sourceIndex - (sourceIndex % 4);

targetIndex = 4 * (x + w * y);
                        targetIndex = targetIndex - (targetIndex % 4);

// Copy the red, green, blue and alpha channels
                        targetData[targetIndex]     = sourceData[sourceIndex];
                        targetData[targetIndex + 1] = sourceData[sourceIndex + 1];
                        targetData[targetIndex + 2] = sourceData[sourceIndex + 2];
                        targetData[targetIndex + 3] = sourceData[sourceIndex + 3];
                    }

}
            }

// Clear the canvas element and copy the target image
//            context.clearRect(0, 0, image.width, image.height);
            context.putImageData(target, 0, 0);

}

d3.timer(function() {
  var dt = Date.now() - time;
  projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
  onLoad();
});

})();

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js