Skip to content

Instantly share code, notes, and snippets.

@slojo404
Forked from tmcw/index.html
Created May 8, 2012 23:02
Show Gist options
  • Save slojo404/2640229 to your computer and use it in GitHub Desktop.
Save slojo404/2640229 to your computer and use it in GitHub Desktop.
<!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';
});
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment