var canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 180;
var ctx = canvas.getContext('2d');
var bm = new Image();
function lonscale(x) {
    return (x + 180);
}
function latscale(y) {
    return (-y + 90);
}

function px(data, x, y) {
    var w = 360;
    var r = data[4 * ((y * w) + x) + 0];
    var g = data[4 * ((y * w) + x) + 1];
    var b = data[4 * ((y * w) + x) + 2];
    return 'rgb(' + [r, g, b].join(',') + ')';
}

bm.onload = function() {
    ctx.drawImage(bm, 0, 0, 360, 180);
    var data = ctx.getImageData(0, 0, 360, 180);
    var points = [];
    var step = 5;
    for (var lon = -180; lon < 180; lon += step) {
        for (var lat = -90; lat < 80; lat += step) {
            points.push([{
                    type: 'Point',
                    coordinates: [lon, lat]
            },
            px(data.data, lonscale(lon), latscale(lat))]);
        }
    }

    var width = 300,
        height = 300;

    var projection = d3.geo.orthographic()
        .scale(100)
        .translate([width / 2, height / 2])
        .clipAngle(90);

    var path = d3.geo.path()
        .pointRadius(6)
        .projection(projection);

    var λ = d3.scale.linear()
        .domain([0, width])
        .range([-180, 180]);

    var φ = d3.scale.linear()
        .domain([0, height])
        .range([90, -90]);

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

    svg.on("mousemove", function() {
      var p = d3.mouse(this);
      projection.rotate([λ(p[0]), φ(p[1])]);
      svg.selectAll("path.color").attr("d", function(d) {
          return path(d[0]);
      });
    });

    svg.selectAll("path.color")
      .data(points)
      .enter()
      .append('path')
      .attr('class', 'color')
      .style('fill', function(d) {
          return d[1];
      })
      .attr('d', function(d) {
          return path(d[0]);
    });
};

bm.src = 'bm_small.jpg';