A spinning Globe
Made by Josh
\ ゜o゜)ノ
Last active
October 2, 2017 03:17
-
-
Save phocks/f3e4774f62a110606e1979cf8e11286b to your computer and use it in GitHub Desktop.
A 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: gpl-3.0 | |
| height: 500 | |
| scrolling: no | |
| border: yes |
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
| const width = 400, | |
| height = 400; | |
| const svg = d3.select('#map') | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| const url = "./world.geo.json"; | |
| d3.json(url, (error, geojson) => { | |
| const projection = d3.geoOrthographic() | |
| .fitSize([width, height], geojson); | |
| const path = d3.geoPath() | |
| .projection(projection); | |
| const geoPath = svg | |
| .append('path') | |
| .attr('d', path(geojson)); | |
| let rotation = 0; | |
| const t0 = Date.now(); | |
| const fps = 15; | |
| d3.interval(function() { | |
| var t = Date.now() - t0; | |
| projection.rotate([0.003 * t, 0]); | |
| geoPath.attr('d', path(geojson)); | |
| }, 1000 / fps); | |
| }); |
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> | |
| <html> | |
| <head> | |
| <title>The World!</title> | |
| <meta name="description" content="The world"> | |
| <link id="favicon" rel="icon" href="https://cdn.glitch.com/project-avatar/9df3cdd3-6a84-457e-8a74-ed2fb96f9017.png?1505017099597" type="image/x-icon"> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <div id="map"></div> | |
| </main> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="./client.js"></script> | |
| </body> | |
| </html> |
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
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: helvetica, arial, sans-serif; | |
| min-width: 100vw; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; /*centers items on the line (the x-axis by default)*/ | |
| align-items: center; /*centers items on the cross-axis (y by default)*/ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment