public
Created

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!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>
site.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
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';
});
});
 
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.