Working on figuring out how rotating stuff works w/ d3, but w/ the Gnomic projection for a little fun. When I still absolutely didn't know what was going on (I still don't think I get it) this rotates the map on both the axis so you can see the whole world gnomized from different centers if you're willing to stare at your screen long enough.
Last active
August 29, 2015 14:03
-
-
Save mpmckenna8/9c6fadb0fd63f1e28a74 to your computer and use it in GitHub Desktop.
Gnomic Projection World Tour
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| .graticule { | |
| fill: none; | |
| stroke: rgb(243, 255, 107); | |
| stroke-width: .5px; | |
| stroke-opacity: .5; | |
| } | |
| .land { | |
| fill: rgb(229, 110, 255); | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke:rgb(229, 110, 255); | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 960, | |
| // should try changing the rotate values. think first at 0 stops rolling hemispheres, tho I kind of like that. | |
| rotate = [10, -10], | |
| velocity = [.003, -.001], | |
| time = Date.now(); | |
| var projection = d3.geo.gnomonic() | |
| .clipAngle(90 - 1e-3) | |
| .scale(150) | |
| .translate([width/2, height / 2]) | |
| .precision(.1) | |
| // rotate([yaw, pitch, roll]) or long lat and roll | |
| .rotate([0,-90 ,25]) | |
| // .center([-240,20]) | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var graticule = d3.geo.graticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("path") | |
| .datum(graticule) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| d3.json("/mpmckenna8/raw/9965876/world-50m.json", function(error, world) { | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| svg.insert("path", ".graticule") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| var feature = svg.selectAll("path"); | |
| d3.timer(function(){ | |
| var dt = Date.now() - time; | |
| projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]); | |
| //.style("stroke-width", 4 + "px") | |
| //.style("stroke", "pink"); | |
| feature.attr("d", path); | |
| }) | |
| d3.selectAll('.land') | |
| .transition() | |
| //.delay(699) | |
| .duration(69999) | |
| .style("fill","rgb(108, 255, 110)"); | |
| }); | |
| d3.select('svg') | |
| .style('background', 'rgb(108, 129, 255)') | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment