Last active
May 11, 2020 08:36
-
-
Save sauercrowd/844d73202ee78a53a31b1bdf458f457b to your computer and use it in GitHub Desktop.
D3 Earth rotation
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
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> | |
| </head> | |
| <body> | |
| <svg id="svg_map" width="1200" height="1000" /> | |
| </body> | |
| <script> | |
| async function main(){ | |
| const map = d3.select("#svg_map"); | |
| const projection = d3.geoOrthographic(); | |
| const map_data = await d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json"); | |
| let angle = 0; | |
| function render(){ | |
| projection.rotate([angle,0,0]); | |
| let elements = map.selectAll("path") | |
| .data(map_data.features); | |
| elements.enter().append("path"); | |
| elements.attr("class", "country") | |
| .attr("id", d => d.id) | |
| .attr("fill", "#fff") | |
| .attr("d", d3.geoPath() .projection(projection)) | |
| .style("stroke", "gray") | |
| .on("mouseover", function(d){ | |
| var chosenElement = d3.select(this); | |
| d3.selectAll(".country") | |
| .style("opacity", 0.1); | |
| chosenElement.style("opacity", 1.0); | |
| }); | |
| x.exit().remove(); | |
| angle = (angle + 1) % 360; | |
| } | |
| setInterval(render, 10); | |
| } | |
| main(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment