D3 Examples - sumatra_tsunami

xxxxxxxxxx
 
<!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>
​
<div id="canvas-image-orthographic" style="margin-left: -23px; margin-top: 259px"></div>
    
    
​
<script>
    (function() {
        var width = 2160,
            height = 1080,
            rotate = [10, 0],
            velocity = [0.00175, 0],
            time = Date.now();
​
        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>
    