Created
January 21, 2012 20:00
-
-
Save tmcw/1653763 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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