Created
March 7, 2016 07:13
-
-
Save daniel0128/353452ec99689037591a to your computer and use it in GitHub Desktop.
Geovisualization of mortality and gdp. The color shows infant.mortality/gdp. The deeper the color, the higher the rate. Country with gray color may be lack of data
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> | |
<!--The code is modified from: https://vida.io/gists/wkBiuLqiHmTxtZ5hy--> | |
<html lang="en"> | |
<meta charset="utf-8"> | |
<title>Geovisualizaiton</title> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
width: 960px; | |
height: 500px; | |
position: relative; | |
} | |
#canvas { | |
} | |
#canvas-svg { | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: 1px; | |
} | |
#tooltip-container { | |
position: absolute; | |
background-color: #fff; | |
color: #000; | |
padding: 10px; | |
border: 1px solid; | |
display: none; | |
} | |
.tooltip_key { | |
font-weight: bold; | |
} | |
.tooltip_value { | |
margin-left: 20px; | |
float: right; | |
} | |
</style> | |
<div id="tooltip-container"></div> | |
<div id="canvas-svg"></div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script> | |
d3.csv("UN.csv", function(err, data) { | |
var config = {"data0":"country","data1":"infant.mortality","data2":"gdp", | |
"label0":"label 0","label1":"label 1","color0":"#99ccff","color1":"#0050A1", | |
"width":960,"height":960}; | |
var width = config.width, | |
height = config.height; | |
var COLOR_COUNTS = 9; | |
function Interpolate(start, end, steps, count) { | |
var s = start, | |
e = end, | |
final = s + (((e - s) / steps) * count); | |
return Math.floor(final); | |
} | |
function Color(_r, _g, _b) { | |
var r, g, b; | |
var setColors = function(_r, _g, _b) { | |
r = _r; | |
g = _g; | |
b = _b; | |
}; | |
setColors(_r, _g, _b); | |
this.getColors = function() { | |
var colors = { | |
r: r, | |
g: g, | |
b: b | |
}; | |
return colors; | |
}; | |
} | |
function hexToRgb(hex) { | |
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | |
return result ? { | |
r: parseInt(result[1], 16), | |
g: parseInt(result[2], 16), | |
b: parseInt(result[3], 16) | |
} : null; | |
} | |
function valueFormat(d) { | |
if (d > 1000000000) { | |
return Math.round(d / 1000000000 * 10) / 10 + "B"; | |
} else if (d > 1000000) { | |
return Math.round(d / 1000000 * 10) / 10 + "M"; | |
} else if (d > 1000) { | |
return Math.round(d / 1000 * 10) / 10 + "K"; | |
} else { | |
return d; | |
} | |
} | |
var COLOR_FIRST = config.color0, COLOR_LAST = config.color1; | |
var rgb = hexToRgb(COLOR_FIRST); | |
var COLOR_START = new Color(rgb.r, rgb.g, rgb.b); | |
rgb = hexToRgb(COLOR_LAST); | |
var COLOR_END = new Color(rgb.r, rgb.g, rgb.b); | |
var startColors = COLOR_START.getColors(), | |
endColors = COLOR_END.getColors(); | |
var colors = []; | |
for (var i = 0; i < COLOR_COUNTS; i++) { | |
var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i); | |
var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i); | |
var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i); | |
colors.push(new Color(r, g, b)); | |
} | |
var MAP_KEY = config.data0; | |
var MAP_VALUE = config.data1; | |
var MAP_VALUE_2 = config.data2; | |
var projection = d3.geo.mercator() | |
.scale((width + 1) / 2 / Math.PI) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
var path = d3.geo.path() | |
.projection(projection); | |
var graticule = d3.geo.graticule(); | |
var svg = d3.select("#canvas-svg").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
var valueHash = {}; | |
function log10(val) { | |
return Math.log(val); | |
} | |
data.forEach(function(d) { | |
valueHash[d[MAP_KEY]] = (+d[MAP_VALUE])/(+d[MAP_VALUE_2]); | |
//valueHash[d[MAP_KEY]] = +d[MAP_VALUE]; | |
}); | |
var quantize = d3.scale.quantize() | |
.domain([0, 1.0]) | |
.range(d3.range(COLOR_COUNTS).map(function(i) { return i })); | |
quantize.domain([d3.min(data, function(d){ | |
// return (+d[MAP_VALUE]) }), | |
return (+d[MAP_VALUE])/(+d[MAP_VALUE_2]) }), | |
d3.max(data, function(d){ | |
return (+d[MAP_VALUE])/(+d[MAP_VALUE_2]) })]); | |
//return (+d[MAP_VALUE]) })]); | |
d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/world-topo-min.json", function(error, world) { | |
var countries = topojson.feature(world, world.objects.countries).features; | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "choropleth") | |
.attr("d", path); | |
var g = svg.append("g"); | |
g.append("path") | |
.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]}) | |
.attr("class", "equator") | |
.attr("d", path); | |
var country = g.selectAll(".country").data(countries); | |
country.enter().insert("path") | |
.attr("class", "country") | |
.attr("d", path) | |
.attr("id", function(d,i) { return d.id; }) | |
.attr("title", function(d) { return d.properties.name; }) | |
.style("fill", function(d) { | |
if (valueHash[d.properties.name]) { | |
var c = quantize((valueHash[d.properties.name])); | |
var color = colors[c].getColors(); | |
return "rgb(" + color.r + "," + color.g + | |
"," + color.b + ")"; | |
} else { | |
return "#ccc"; | |
} | |
}) | |
.on("mousemove", function(d) { | |
var html = ""; | |
html += "<div class=\"tooltip_kv\">"; | |
html += "<span class=\"tooltip_key\">"; | |
html += d.properties.name; | |
html += "</span>"; | |
html += "<span class=\"tooltip_value\">"; | |
html += (valueHash[d.properties.name] ? valueFormat(valueHash[d.properties.name]) : ""); | |
html += ""; | |
html += "</span>"; | |
html += "</div>"; | |
$("#tooltip-container").html(html); | |
$(this).attr("fill-opacity", "0.8"); | |
$("#tooltip-container").show(); | |
var coordinates = d3.mouse(this); | |
var map_width = $('.choropleth')[0].getBoundingClientRect().width; | |
if (d3.event.pageX < map_width / 2) { | |
d3.select("#tooltip-container") | |
.style("top", (d3.event.layerY + 15) + "px") | |
.style("left", (d3.event.layerX + 15) + "px"); | |
} else { | |
var tooltip_width = $("#tooltip-container").width(); | |
d3.select("#tooltip-container") | |
.style("top", (d3.event.layerY + 15) + "px") | |
.style("left", (d3.event.layerX - tooltip_width - 30) + "px"); | |
} | |
}) | |
.on("mouseout", function() { | |
$(this).attr("fill-opacity", "1.0"); | |
$("#tooltip-container").hide(); | |
}); | |
g.append("path") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
svg.attr("height", config.height * 2.2 / 3); | |
}); | |
d3.select(self.frameElement).style("height", (height * 2.3 / 3) + "px"); | |
}); | |
</script> | |
</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
country | infant.mortality | gdp | |
---|---|---|---|
Afghanistan | 154 | 2848 | |
Albania | 32 | 863 | |
Algeria | 44 | 1531 | |
American Samoa | 11 | NA | |
Andorra | NA | NA | |
Angola | 124 | 355 | |
Antigua | 24 | 6966 | |
Argentina | 22 | 8055 | |
Armenia | 25 | 354 | |
Australia | 6 | 20046 | |
Austria | 6 | 29006 | |
Azerbaijan | 33 | 321 | |
Bahamas | 14 | 12545 | |
Bahrain | 18 | 9073 | |
Bangladesh | 78 | 280 | |
Barbados | 9 | 7173 | |
Belarus | 15 | 994 | |
Belgium | 7 | 26582 | |
Belize | 30 | 2569 | |
Benin | 84 | 391 | |
Bhutan | 104 | 166 | |
Bolivia | 66 | 909 | |
Bosnia | 13 | 271 | |
Botswana | 56 | 3640 | |
Brazil | 42 | 4510 | |
Brunei | 9 | 16683 | |
Bulgaria | 16 | 1518 | |
Burkina Faso | 97 | 165 | |
Burundi | 114 | 205 | |
Cambodia | 102 | 130 | |
Cameroon | 58 | 627 | |
Canada | 6 | 18943 | |
Cape Verde | 41 | 994 | |
Central African Rep | 96 | 379 | |
Chad | 115 | 187 | |
Chile | 13 | 4736 | |
China | 38 | 582 | |
Colombia | 24 | 2215 | |
Comoros | 82 | 367 | |
Congo | 90 | 1008 | |
Cook Islands | 26 | 5432 | |
Costa Rica | 12 | 2696 | |
Croatia | 10 | 4014 | |
Cuba | 9 | 1983 | |
Cyprus | 7 | 11459 | |
Czech Republic | 9 | 4450 | |
Dem Rep of the Congo | 89 | 117 | |
Denmark | 7 | 33191 | |
Djibouti | 106 | 893 | |
Dominica | NA | 2831 | |
Dominican Republic | 34 | 1508 | |
East Timor | 135 | NA | |
Ecuador | 46 | 1565 | |
Egypt | 54 | 973 | |
El Salvador | 39 | 1660 | |
Equatorial Guinea | 107 | 388 | |
Eritrea | 98 | 96 | |
Estonia | 12 | 2433 | |
Ethiopia | 107 | 96 | |
Fiji | 20 | 2593 | |
Finland | 5 | 24453 | |
France | 7 | 26444 | |
French Guyana | 22 | 23530 | |
French Polynesia | 10 | 19766 | |
Gabon | 85 | 5007 | |
Gambia | 122 | 321 | |
Gaza Strip | 37 | NA | |
Georgia | 23 | 343 | |
Germany | 6 | 29632 | |
Ghana | 73 | 397 | |
Greece | 8 | 8684 | |
Grenada | 14 | 2485 | |
Guadeloupe | 8 | 9145 | |
Guam | 10 | NA | |
Guatemala | 40 | 1392 | |
Guinea | 124 | 442 | |
Guinea Bissau | 132 | 131 | |
Guyana | 58 | 726 | |
Haiti | 82 | 386 | |
Honduras | 35 | 697 | |
Hong Kong | 5 | 22898 | |
Hungary | 14 | 4325 | |
Iceland | 5 | 26217 | |
India | 72 | 365 | |
Indonesia | 48 | 1019 | |
Iran | 39 | 1544 | |
Iraq | 95 | 11308 | |
Ireland | 6 | 17419 | |
Israel | 7 | 16738 | |
Italy | 7 | 19121 | |
Ivory Coast | 86 | 736 | |
Jamaica | 12 | 1779 | |
Japan | 4 | 41718 | |
Jordan | 30 | 1228 | |
Kazakhstan | 34 | 995 | |
Kenya | 65 | 330 | |
Kiribati | 65 | 654 | |
North Korea | 22 | 271 | |
South Korea | 9 | 9736 | |
Kuwait | 14 | 15757 | |
Kyrgyzstan | 39 | 331 | |
Laos | 86 | 359 | |
Latvia | 16 | 1764 | |
Lebanon | 29 | 3114 | |
Lesotho | 72 | 486 | |
Liberia | 153 | 1124 | |
Libya | 56 | 5498 | |
Liechtenstein | NA | 42416 | |
Lithuania | 13 | 1595 | |
Luxembourg | 6 | 35109 | |
Macau | 8 | NA | |
Macedonia | 23 | 1660 | |
Madagascar | 77 | 215 | |
Malawi | 142 | 142 | |
Malaysia | 11 | 4313 | |
Maldives | 49 | 1079 | |
Mali | 149 | 223 | |
Malta | 8 | 8793 | |
Marshall Islands | 26 | 1649 | |
Martinique | 7 | 12717 | |
Mauritania | 92 | 401 | |
Mauritius | 15 | 3508 | |
Mexico | 31 | 2700 | |
Micronesia | 20 | 2104 | |
Moldova | 26 | 383 | |
Monaco | NA | 26470 | |
Mongolia | 52 | 388 | |
Morocco | 51 | 1265 | |
Mozambique | 110 | 77 | |
Myanmar | 78 | 2399 | |
Namibia | 60 | 2059 | |
Nepal | 82 | 203 | |
Netherlands | 6 | 25635 | |
Netherlands Antilles | 10 | 9039 | |
New Caledonia | 18 | 19450 | |
New Zealand | 7 | 16866 | |
Nicaragua | 44 | 464 | |
Niger | 114 | 207 | |
Nigeria | 77 | 587 | |
Northern Mariana Islands | 2 | NA | |
Norway | 5 | 33734 | |
Oman | 25 | 6232 | |
Pakistan | 74 | 504 | |
Palau | 25 | 6417 | |
Panama | 21 | 2934 | |
Papua New Guinea | 61 | 1083 | |
Paraguay | 39 | 1860 | |
Peru | 45 | 2497 | |
Philippines | 35 | 1093 | |
Poland | 13 | 3058 | |
Portugal | 8 | 10428 | |
Puerto Rico | 9 | 12213 | |
Qatar | 17 | 14013 | |
Reunion | 7 | 11854 | |
Romania | 24 | 1570 | |
Russian Federation | 19 | 2451 | |
Rwanda | 125 | 238 | |
Saint Kitts | 25 | 4819 | |
Saint Lucia | 18 | 3183 | |
Samoa | 58 | 1106 | |
San Marino | NA | 19121 | |
Sao Tome | 51 | 49 | |
Saudi Arabia | 23 | 6583 | |
Senegal | 62 | 572 | |
Seychelles | 12 | 7272 | |
Sierra Leone | 169 | 293 | |
Singapore | 5 | 25581 | |
Slovakia | 12 | 3266 | |
Slovenia | 7 | 9652 | |
Solomon Islands | 23 | 686 | |
Somalia | 112 | 119 | |
South Africa | 48 | 3230 | |
Spain | 7 | 14111 | |
Sri Lanka | 15 | 716 | |
St Vincent | 19 | 2305 | |
Sudan | 71 | 36 | |
Suriname | 24 | 967 | |
Swaziland | 65 | 1389 | |
Sweden | 5 | 26253 | |
Switzerland | 5 | 42416 | |
Syria | 33 | 3573 | |
Tajikistan | 56 | 122 | |
Tanzania | 80 | 139 | |
Thailand | 30 | 2896 | |
Togo | 86 | 322 | |
Tonga | 3 | 1787 | |
Trinidad and Tobago | 14 | 4083 | |
Tunisia | 37 | 2030 | |
Turkey | 44 | 2814 | |
Turkmenistan | 57 | 321 | |
Tuvalu | NA | NA | |
Uganda | 113 | 305 | |
Ukraine | 18 | 694 | |
United Arab Emirates | 15 | 17690 | |
United Kingdom | 6 | 18913 | |
United States | 7 | 26037 | |
Uruguay | 17 | 5602 | |
Uzbekistan | 43 | 435 | |
Vanuatu | 38 | 1289 | |
Venezuela | 21 | 3496 | |
Viet Nam | 37 | 270 | |
Virgin Islands | 12 | NA | |
Western Sahara | 64 | NA | |
Yemen | 80 | 732 | |
Yugoslavia | 19 | 1487 | |
Zambia | 103 | 382 | |
Zimbabwe | 68 | 786 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment