tomstove · May 18, 2013 08:14
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
 <style>

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

 var width = 960,
    height = 500;
  
 var projection = d3.geo.kavrayskiy7();

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

 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.src = "http://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73776/world.topo.bathy.200408.3x5400x2700.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>	
 </body>
 </html>
	<!DOCTYPE html>
	<head>
	<style>

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

	var width = 960,
	height = 500;

	var projection = d3.geo.kavrayskiy7();

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

	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.src = "http://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73776/world.topo.bathy.200408.3x5400x2700.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>
	</body>
	</html>