slojo404 · May 8, 2012 23:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Projection Demo</title>
    <script type='text/javascript' src='http://mbostock.github.com/d3/d3.js'></script>
    <script type='text/javascript' src='http://mbostock.github.com/d3/d3.geo.js'></script>
    <style type='text/css'>
      body {
        margin:5px auto;
      }
      h1 {
        font:20px/20px "Helvetica Neue";
        margin:0;
      }
      p {
        color:#333;
        font:12px/15px "Helvetica Neue";
      }

      circle.merc {
        fill:#005982;
      }

      circle.ortho {
        fill:#971c20;
      }

      path.connect {
        fill:none;
        stroke-width:0.2;
        stroke:#aaa;
      }
    </style>
  </head>
  <body>
    <h2><span id='account-name'></span></h2>
    <h1>Mercator to Orthographic Projection</h1>
    <p>Map projections are transformations between one shape to another,
    often a 2d surface like a screen or printout. Below is a mercator projection
    alongside an orthographic (azimuthal) projection, and a mapping of points -
    every 10 degrees latitude and longitude, between the two. The orthographic projection is also inaccurate: the world
    is not a sphere. This is made with <a href='http://mbostock.github.com/d3/'>d3</a>.</p>

    <div id='chart'></div>
    <script type='text/javascript' src='site.js'></script>
  </body>
 </html>
diff --git a/site.js b/site.js
 window.onload = function() {
  merc = d3.geo.mercator()
    .scale(400)
    .translate([200, 200]);

  ortho = d3.geo.azimuthal()
      .scale(160)
      .origin([-71.03, 0])
      .mode("orthographic")
      .translate([600, 220]);

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

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

  var w = 780,
      h = 500;

  var svg = d3.select("#chart").append("svg:svg")
    .attr("width",  w)
    .attr("height", h);

  var points = [];
  for (var lon = -180; lon < 180; lon += 10) {
      for (var lat = -90; lat < 90; lat += 10) {
          points.push([lon, lat]);
      }
  }

  svg.selectAll("circle.merc")
    .data(points)
    .enter()
    .append('svg:circle')
    .attr('class', 'merc')
    .attr('r', 1)
    .attr('transform', function(d) {
      return 'translate(' + merc(d).join(',') + ')';
    });

    var ortho_drawn = svg.selectAll("circle.ortho")
      .data(points)
      .enter()
      .append('svg:circle')
      .attr('class', 'ortho')
      .attr('r', 1)
      .attr('transform', function(d) {
        return 'translate(' + ortho(d).join(',') + ')';
      });

    var connections = svg.selectAll("path.connect")
      .data(points)
      .enter()
      .append('svg:path')
      .attr('class', 'connect')
      .attr('d', function(d) {
        return 'M' + merc(d).join(' ') + 'L' + ortho(d).join(' ') +  'z';
      });

    svg.on('mousemove', function() {
      var x = ((d3.event.pageX / w) * 360) - 180;
      var y = ((d3.event.pageY / h) * 360) - 180;

      ortho.origin([x, y]);

      ortho_drawn.attr('transform', function(d) {
        return 'translate(' + ortho(d).join(',') + ')';
      });
      connections.attr('d', function(d) {
        return 'M' + merc(d).join(' ') + 'L' + ortho(d).join(' ') +  'z';
      });
    });

 };
	<!DOCTYPE html>
	<html>
	<head>
	<title>Projection Demo</title>
	<script type='text/javascript' src='http://mbostock.github.com/d3/d3.js'></script>
	<script type='text/javascript' src='http://mbostock.github.com/d3/d3.geo.js'></script>
	<style type='text/css'>
	body {
	margin:5px auto;
	}
	h1 {
	font:20px/20px "Helvetica Neue";
	margin:0;
	}
	p {
	color:#333;
	font:12px/15px "Helvetica Neue";
	}

	circle.merc {
	fill:#005982;
	}

	circle.ortho {
	fill:#971c20;
	}

	path.connect {
	fill:none;
	stroke-width:0.2;
	stroke:#aaa;
	}
	</style>
	</head>
	<body>
	<h2><span id='account-name'></span></h2>
	<h1>Mercator to Orthographic Projection</h1>
	<p>Map projections are transformations between one shape to another,
	often a 2d surface like a screen or printout. Below is a mercator projection
	alongside an orthographic (azimuthal) projection, and a mapping of points -
	every 10 degrees latitude and longitude, between the two. The orthographic projection is also inaccurate: the world
	is not a sphere. This is made with <a href='http://mbostock.github.com/d3/'>d3</a>.</p>

	<div id='chart'></div>
	<script type='text/javascript' src='site.js'></script>
	</body>
	</html>
	window.onload = function() {
	merc = d3.geo.mercator()
	.scale(400)
	.translate([200, 200]);

	ortho = d3.geo.azimuthal()
	.scale(160)
	.origin([-71.03, 0])
	.mode("orthographic")
	.translate([600, 220]);

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

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

	var w = 780,
	h = 500;

	var svg = d3.select("#chart").append("svg:svg")
	.attr("width", w)
	.attr("height", h);

	var points = [];
	for (var lon = -180; lon < 180; lon += 10) {
	for (var lat = -90; lat < 90; lat += 10) {
	points.push([lon, lat]);
	}
	}

	svg.selectAll("circle.merc")
	.data(points)
	.enter()
	.append('svg:circle')
	.attr('class', 'merc')
	.attr('r', 1)
	.attr('transform', function(d) {
	return 'translate(' + merc(d).join(',') + ')';
	});

	var ortho_drawn = svg.selectAll("circle.ortho")
	.data(points)
	.enter()
	.append('svg:circle')
	.attr('class', 'ortho')
	.attr('r', 1)
	.attr('transform', function(d) {
	return 'translate(' + ortho(d).join(',') + ')';
	});

	var connections = svg.selectAll("path.connect")
	.data(points)
	.enter()
	.append('svg:path')
	.attr('class', 'connect')
	.attr('d', function(d) {
	return 'M' + merc(d).join(' ') + 'L' + ortho(d).join(' ') + 'z';
	});

	svg.on('mousemove', function() {
	var x = ((d3.event.pageX / w) * 360) - 180;
	var y = ((d3.event.pageY / h) * 360) - 180;

	ortho.origin([x, y]);

	ortho_drawn.attr('transform', function(d) {
	return 'translate(' + ortho(d).join(',') + ')';
	});
	connections.attr('d', function(d) {
	return 'M' + merc(d).join(' ') + 'L' + ortho(d).join(' ') + 'z';
	});
	});

	};