| license: mit |
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.
forked from curran's block: Spinning Globe
forked from curran's block: Simplified Globe
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="//unpkg.com/topojson-client@3"></script> | |
| <script src="//unpkg.com/topojson-simplify@3"></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 presimplified = topojson.presimplify(world); | |
| const simpleWorld = topojson.simplify(presimplified, 11); | |
| const land = topojson.feature(simpleWorld, simpleWorld.objects.land); | |
| console.log(JSON.stringify(land)) | |
| d3.timer(t => { | |
| projection.rotate([t * 0.05, Math.sin(t * 0.0005) * 45]); | |
| path.attr('d', geoPath(land)); | |
| }); | |
| }); | |
| </script> | |
| </body> |