A globe that spins. Uses world-110m from TOPOJSON World Atlas. Inspired by This Is a Globe.
This was the first stop along the way for creating a more involved map. I was so amazed at how little code was required to get this to show up.
Last active
May 6, 2020 20:19
-
-
Save curran/a9555f8041f04a5cbfb53e6f5c53caae to your computer and use it in GitHub Desktop.
Spinning Globe
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const path = d3.select('svg').append('path'); | |
| const projection = d3.geoOrthographic(); | |
| const geoPath = d3.geoPath().projection(projection); | |
| d3.json('world-110m.json', (error, world) => { | |
| const land = topojson.feature(world, world.objects.land); | |
| d3.timer(t => { | |
| projection.rotate([t * 0.05, Math.sin(t * 0.0005) * 45]); | |
| path.attr('d', geoPath(land)); | |
| }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment