Built with blockbuilder.org
This is the d3.v4 version of global earth.
forked from KoGor’s Block global earth.
Last active
November 5, 2017 17:20
-
-
Save Q-Zhao/47c42d002a6d521457c1937caace12ea to your computer and use it in GitHub Desktop.
Earth globe - v4
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
| license: mit |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Earth globe - v4</title> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| </head> | |
| <style type="text/css"> | |
| .water { | |
| fill: #00248F; | |
| } | |
| .land { | |
| fill: #A98B6F; | |
| stroke: #FFF; | |
| stroke-width: 0.7px; | |
| } | |
| .land:hover { | |
| fill:#33CC33; | |
| stroke-width: 1px; | |
| } | |
| .focused { | |
| fill: #33CC33; | |
| } | |
| select { | |
| position: absolute; | |
| top: 20px; | |
| left: 580px; | |
| border: solid #ccc 1px; | |
| padding: 3px; | |
| box-shadow: inset 1px 1px 2px #ddd8dc; | |
| } | |
| .countryTooltip { | |
| position: absolute; | |
| display: none; | |
| pointer-events: none; | |
| background: #fff; | |
| padding: 5px; | |
| text-align: left; | |
| border: solid #ccc 1px; | |
| color: #666; | |
| font-size: 14px; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <script> | |
| var width = 600, | |
| height = 500, | |
| sens = 0.25, | |
| focused; | |
| //Setting projection | |
| var projection = d3.geoOrthographic () | |
| .scale(245) | |
| .rotate([0, 0]) | |
| .translate([width / 2, height / 2]) | |
| .clipAngle(90); | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| //SVG container | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| //Adding water | |
| svg.append("path") | |
| .datum({type: "Sphere"}) | |
| .attr("class", "water") | |
| .attr("d", path); | |
| var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip"), | |
| countryList = d3.select("body").append("select").attr("name", "countries"); | |
| queue() | |
| .defer(d3.json, "world-110m.json") | |
| .defer(d3.tsv, "world-110m-country-names.tsv") | |
| .await(ready); | |
| //Main function | |
| function ready(error, world, countryData) { | |
| var countryById = {}, | |
| countries = topojson.feature(world, world.objects.countries).features; | |
| //Adding countries to select | |
| countryData.forEach(function(d) { | |
| countryById[d.id] = d.name; | |
| option = countryList.append("option"); | |
| option.text(d.name); | |
| option.property("value", d.id); | |
| }); | |
| //Drawing countries on the globe | |
| var world = svg.selectAll("path.land") | |
| .data(countries) | |
| .enter().append("path") | |
| .attr("class", "land") | |
| .attr("d", path) | |
| //Drag event | |
| .call(d3.drag() | |
| .subject(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; }) | |
| .on("drag", function() { | |
| var rotate = projection.rotate(); | |
| projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]); | |
| svg.selectAll("path.land").attr("d", path); | |
| svg.selectAll(".focused").classed("focused", focused = false); | |
| })) | |
| //Mouse events | |
| .on("mouseover", function(d) { | |
| countryTooltip.text(countryById[d.id]) | |
| .style("left", (d3.event.pageX + 7) + "px") | |
| .style("top", (d3.event.pageY - 15) + "px") | |
| .style("display", "block") | |
| .style("opacity", 1); | |
| }) | |
| .on("mouseout", function(d) { | |
| countryTooltip.style("opacity", 0) | |
| .style("display", "none"); | |
| }) | |
| .on("mousemove", function(d) { | |
| countryTooltip.style("left", (d3.event.pageX + 7) + "px") | |
| .style("top", (d3.event.pageY - 15) + "px"); | |
| }); | |
| //Country focus on option select | |
| d3.select("select").on("change", function() { | |
| var rotate = projection.rotate(), | |
| focusedCountry = country(countries, this), | |
| p = d3.geoCentroid(focusedCountry); | |
| svg.selectAll(".focused").classed("focused", focused = false); | |
| //Globe rotating | |
| (function transition() { | |
| d3.transition() | |
| .duration(2500) | |
| .tween("rotate", function() { | |
| var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]); | |
| return function(t) { | |
| projection.rotate(r(t)); | |
| svg.selectAll("path").attr("d", path) | |
| .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; }); | |
| }; | |
| }) | |
| })(); | |
| }); | |
| function country(cnt, sel) { | |
| for(var i = 0, l = cnt.length; i < l; i++) { | |
| if(cnt[i].id == sel.value) {return cnt[i];} | |
| } | |
| }; | |
| }; | |
| </script> | |
| </body> | |
| </html> |
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
| id | name | |
|---|---|---|
| 4 | Afghanistan | |
| 8 | Albania | |
| 12 | Algeria | |
| 24 | Angola | |
| 10 | Antarctica | |
| 32 | Argentina | |
| 51 | Armenia | |
| 36 | Australia | |
| 40 | Austria | |
| 31 | Azerbaijan | |
| 44 | Bahamas | |
| 50 | Bangladesh | |
| 112 | Belarus | |
| 56 | Belgium | |
| 84 | Belize | |
| 204 | Benin | |
| 64 | Bhutan | |
| 68 | Bolivia | |
| 70 | Bosnia and Herzegovina | |
| 72 | Botswana | |
| 76 | Brazil | |
| 96 | Brunei Darussalam | |
| 100 | Bulgaria | |
| 854 | Burkina Faso | |
| 108 | Burundi | |
| 116 | Cambodia | |
| 120 | Cameroon | |
| 124 | Canada | |
| 140 | Central African Republic | |
| 148 | Chad | |
| 152 | Chile | |
| 156 | China | |
| 170 | Colombia | |
| 178 | Congo | |
| 180 | Democratic Republic of Congo | |
| 188 | Costa Rica | |
| 384 | Cote d'Ivoire | |
| 191 | Croatia | |
| 192 | Cuba | |
| 196 | Cyprus | |
| 203 | Czech Republic | |
| 208 | Denmark | |
| 262 | Djibouti | |
| 214 | Dominican Republic | |
| 218 | Ecuador | |
| 818 | Egypt | |
| 222 | El Salvador | |
| 226 | Equatorial Guinea | |
| 232 | Eritrea | |
| 233 | Estonia | |
| 231 | Ethiopia | |
| 238 | Falkland Islands (Malvinas) | |
| 242 | Fiji | |
| 246 | Finland | |
| 250 | France | |
| 260 | French Southern Territories | |
| 266 | Gabon | |
| 270 | Gambia | |
| 268 | Georgia | |
| 276 | Germany | |
| 288 | Ghana | |
| 300 | Greece | |
| 304 | Greenland | |
| 320 | Guatemala | |
| 324 | Guinea | |
| 624 | Guinea-Bissau | |
| 328 | Guyana | |
| 332 | Haiti | |
| 340 | Honduras | |
| 348 | Hungary | |
| 352 | Iceland | |
| 356 | India | |
| 360 | Indonesia | |
| 364 | Iran | |
| 368 | Iraq | |
| 372 | Ireland | |
| 376 | Israel | |
| 380 | Italy | |
| 388 | Jamaica | |
| 392 | Japan | |
| 400 | Jordan | |
| 398 | Kazakhstan | |
| 404 | Kenya | |
| 408 | North Korea | |
| 410 | South Korea | |
| 414 | Kuwait | |
| 417 | Kyrgyzstan | |
| 418 | Laos | |
| 428 | Latvia | |
| 422 | Lebanon | |
| 426 | Lesotho | |
| 430 | Liberia | |
| 434 | Libya | |
| 440 | Lithuania | |
| 442 | Luxembourg | |
| 807 | Macedonia | |
| 450 | Madagascar | |
| 454 | Malawi | |
| 458 | Malaysia | |
| 466 | Mali | |
| 478 | Mauritania | |
| 484 | Mexico | |
| 498 | Moldova | |
| 496 | Mongolia | |
| 499 | Montenegro | |
| 504 | Morocco | |
| 508 | Mozambique | |
| 104 | Myanmar | |
| 516 | Namibia | |
| 524 | Nepal | |
| 528 | Netherlands | |
| 540 | New Caledonia | |
| 554 | New Zealand | |
| 558 | Nicaragua | |
| 562 | Niger | |
| 566 | Nigeria | |
| 578 | Norway | |
| 512 | Oman | |
| 586 | Pakistan | |
| 275 | Palestinian Territory, Occupied | |
| 591 | Panama | |
| 598 | Papua New Guinea | |
| 600 | Paraguay | |
| 604 | Peru | |
| 608 | Philippines | |
| 616 | Poland | |
| 620 | Portugal | |
| 630 | Puerto Rico | |
| 634 | Qatar | |
| 642 | Romania | |
| 643 | Russia | |
| 646 | Rwanda | |
| 682 | Saudi Arabia | |
| 686 | Senegal | |
| 688 | Serbia | |
| 694 | Sierra Leone | |
| 703 | Slovakia | |
| 705 | Slovenia | |
| 90 | Solomon Islands | |
| 706 | Somalia | |
| 710 | South Africa | |
| 728 | South Sudan | |
| 724 | Spain | |
| 144 | Sri Lanka | |
| 729 | Sudan | |
| 740 | Suriname | |
| 748 | Swaziland | |
| 752 | Sweden | |
| 756 | Switzerland | |
| 760 | Syrian Arab Republic | |
| 158 | Taiwan | |
| 762 | Tajikistan | |
| 834 | Tanzania | |
| 764 | Thailand | |
| 626 | Timor-Leste | |
| 768 | Togo | |
| 780 | Trinidad and Tobago | |
| 788 | Tunisia | |
| 792 | Turkey | |
| 795 | Turkmenistan | |
| 800 | Uganda | |
| 804 | Ukraine | |
| 784 | United Arab Emirates | |
| 826 | United Kingdom | |
| 840 | United States | |
| 858 | Uruguay | |
| 860 | Uzbekistan | |
| 548 | Vanuatu | |
| 862 | Venezuela | |
| 704 | Vietnam | |
| 732 | Western Sahara | |
| 887 | Yemen | |
| 894 | Zambia | |
| 716 | Zimbabwe |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment