Skip to content

Instantly share code, notes, and snippets.

@Q-Zhao
Last active November 5, 2017 17:20
Show Gist options
  • Save Q-Zhao/47c42d002a6d521457c1937caace12ea to your computer and use it in GitHub Desktop.
Save Q-Zhao/47c42d002a6d521457c1937caace12ea to your computer and use it in GitHub Desktop.
Earth globe - v4
license: mit
<!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>
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
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment