Skip to content

Instantly share code, notes, and snippets.

@fabiomainardi
Last active September 15, 2015 05:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fabiomainardi/638ce0f1a0161240c240 to your computer and use it in GitHub Desktop.
Save fabiomainardi/638ce0f1a0161240c240 to your computer and use it in GitHub Desktop.
City Prosperity Index
City lon lat Infrastructure_Index Country Quality_of_Life_Index CPI-4 CPI-5 Environmental_Index ukey Productivity_Index Equity_Index
Vienna 16.374 48.208 0.996 Austria 0.882 0.936 0.925 0.932 Austria-Vienna 0.939 0.883
New York -74.006 40.713 0.994 United States 0.866 0.934 0.825 0.941 United States-New York 0.94 0.502
Toronto -79.383 43.653 0.997 Canada 0.907 0.934 0.89 0.963 Canada-Toronto 0.874 0.733
London -0.100 51.520 0.997 United Kingdom 0.898 0.934 0.904 0.92 United Kingdom-London 0.923 0.793
Stockholm 18.070 59.330 0.995 Sweden 0.925 0.934 0.898 0.921 Sweden-Stockholm 0.896 0.767
Helsinki 24.940 60.170 0.997 Finland 0.905 0.933 0.924 0.944 Finland-Helsinki 0.89 0.89
Dublin -6.250 53.330 0.996 Ireland 0.867 0.929 0.913 0.958 Ireland-Dublin 0.901 0.85
Oslo 10.750 59.910 0.997 Norway 0.914 0.929 0.924 0.939 Norway-Oslo 0.87 0.903
Paris 2.340 48.860 0.996 France 0.925 0.927 0.897 0.895 France-Paris 0.895 0.788
Tokyo 139.770 35.670 0.989 Japan 0.931 0.925 0.905 0.936 Japan-Tokyo 0.85 0.828
Melbourne 144.960 -37.810 0.996 Australia 0.875 0.925 0.903 0.967 Australia-Melbourne 0.867 0.82
Auckland 174.763 -36.848 0.994 New Zealand 0.889 0.922 0.862 0.958 New Zealand-Auckland 0.854 0.657
Amsterdam 4.890 52.370 0.995 Netherlands 0.872 0.915 0.895 0.933 Netherlands-Amsterdam 0.866 0.818
Zurich 8.542 47.377 0.997 Switzerland 0.858 0.914 0.884 0.941 Switzerland-Zurich 0.868 0.772
Copenhagen 12.568 55.676 0.997 Denmark 0.871 0.911 0.913 0.928 Denmark-Copenhagen 0.855 0.922
Brussels 4.330 50.830 0.997 Belgium 0.864 0.91 0.883 0.922 Belgium-Brussels 0.862 0.783
Barcelona 2.1734034999999494 41.3850639 0.995 Spain 0.912 0.909 0.876 0.908 Spain-Barcelona 0.829 0.755
Milan 9.190 45.480 0.997 Italy 0.895 0.908 0.87 0.876 Italy-Milan 0.868 0.733
Warsaw 21.02 52.26 0.99 Poland 0.864 0.901 0.883 0.911 Poland-Warsaw 0.846 0.817
Lisbon -9.139 38.722 0.995 Portugal 0.867 0.899 0.853 0.916 Portugal-Lisbon 0.827 0.692
Budapest 19.08 47.51 0.99 Hungary 0.867 0.894 0.881 0.921 Hungary-Budapest 0.808 0.833
Athens 23.730 37.980 0.996 Greece 0.885 0.889 0.862 0.884 Greece-Athens 0.8 0.762
Prague 14.430 50.080 0.992 Czech Republic 0.771 0.882 0.871 0.926 Czech Republic-Prague 0.855 0.827
Seoul 126.978 37.567 0.989 Republic of Korea 0.903 0.876 0.861 0.822 Republic of Korea-Seoul 0.801 0.807
Moscow 37.62 55.75 0.96 Russia 0.813 0.87 0.793 0.908 Russia-Moscow 0.806 0.55
São Paulo -46.630 -23.530 0.918 Brazil 0.803 0.836 0.757 0.894 Brazil-São Paulo 0.742 0.507
Almaty 76.920 43.320 0.872 Kazakhstan 0.822 0.833 0.83 0.897 Kazakhstan-Almaty 0.751 0.818
Shanghai 121.5 31.2 0.9 China 0.836 0.832 0.826 0.95 China-Shanghai 0.671 0.8
Bucharest 26.100 44.440 0.968 Romania 0.767 0.821 0.836 0.867 Romania-Bucharest 0.707 0.9
Mexico City -99.1 19.4 0.9 Mexico 0.764 0.816 0.709 0.866 Mexico-Mexico City 0.743 0.405
Ankara 32.850 39.930 0.842 Turkey 0.802 0.806 0.78 0.891 Turkey-Ankara 0.699 0.683
Amman 35.930 31.950 0.887 Jordan 0.79 0.796 0.771 0.824 Jordan-Amman 0.697 0.68
Bangkok 100.500 13.730 0.871 Thailand 0.747 0.794 0.733 0.85 Thailand -Bangkok 0.719 0.533
Kyïv 30.523 50.450 0.968 Ukraine 0.757 0.781 0.798 0.874 Ukraine-Kyïv 0.579 0.873
Hà Noi 105.840 21.030 0.912 Viet Nam 0.761 0.776 0.756 0.733 Viet Nam-Hà Noi 0.712 0.683
Yerevan 44.52 40.17 0.87 Armenia 0.85 0.769 0.779 0.745 Armenia-Yerevan 0.635 0.817
Beijing 116.407 39.904 0.911 China 0.836 0.762 0.799 0.663 China-Beijing 0.667 0.967
Cape Town 18.460 -33.930 0.933 South Africa 0.645 0.758 0.59 0.875 South Africa-Cape Town 0.628 0.217
Jakarta 106.830 -6.180 0.741 Indonesia 0.733 0.743 0.769 0.881 Indonesia-Jakarta 0.636 0.885
Johannesburg 28.04 -26.19 0.88 South Africa 0.645 0.742 0.479 0.816 South Africa-Johannesburg 0.654 0.083
Manila 120.970 14.620 0.775 Philippines 0.647 0.737 0.723 0.868 Philippines-Manila 0.676 0.669
Cairo 31.250 30.060 0.916 Egypt 0.743 0.73 0.722 0.616 Egypt-Cairo 0.679 0.692
Casablanca -7.620 33.600 0.827 Morocco 0.513 0.7 0.647 0.891 Morocco-Casablanca 0.634 0.472
Tegucigalapa -87.220 14.090 0.709 Honduras 0.729 0.694 0.652 0.829 Honduras-Tegucigalapa 0.541 0.51
Chisinau 28.830 47.030 0.895 Moldova 0.85 0.693 0.698 0.894 Moldova-Chisinau 0.34 0.717
Mumbai 73.060 19.110 0.745 India 0.739 0.688 0.694 0.632 India-Mumbai 0.645 0.715
Nairobi 36.82 -1.29 0.86 Kenya 0.559 0.673 0.593 0.889 Kenya-Nairobi 0.481 0.357
Phnom Penh 104.920 11.570 0.728 Cambodia 0.613 0.666 0.677 0.809 Cambodia-Phnom Penh 0.544 0.722
Ulaanbaatar 106.910 47.930 0.632 Mongolia 0.777 0.664 0.675 0.804 Mongolia-Ulaanbaatar 0.493 0.722
Guatemala City -90.550 14.630 0.823 Guatemala 0.556 0.646 0.614 0.866 Guatemala-Guatemala City 0.44 0.502
Yaoundé 11.520 3.870 0.666 Cameroon 0.555 0.623 0.618 0.827 Cameroon-Yaoundé 0.492 0.6
New Delhi 77.210 28.670 0.786 India 0.69 0.617 0.635 0.448 India-New Delhi 0.596 0.712
Abidjan -4.030 5.330 0.767 Côte d’Ivoire 0.44 0.599 0.578 0.842 Côte d’Ivoire-Abidjan 0.452 0.5
Kathmundu 85.31 27.71 0.74 Nepal 0.621 0.594 0.598 0.704 Nepal-Kathmundu 0.385 0.617
Dhaka 90.390 23.700 0.673 Bangladesh 0.539 0.593 0.633 0.627 Bangladesh-Dhaka 0.545 0.817
Kampala 32.580 0.320 0.507 Uganda 0.486 0.59 0.581 0.956 Uganda-Kampala 0.512 0.55
Lagos 3.350 6.500 0.576 Nigeria 0.634 0.582 0.496 0.659 Nigeria-Lagos 0.475 0.262
Accra -0.200 5.560 0.737 Ghana 0.592 0.576 0.56 0.728 Ghana-Accra 0.347 0.5
La Paz -68.150 -16.500 0.745 Bolivia 0.621 0.565 0.551 0.606 Bolivia-La Paz 0.363 0.502
Addis Abeba 38.740 9.030 0.521 Ethiopia 0.534 0.564 0.501 0.724 Ethiopia-Addis Ababa 0.503 0.313
Dakar -17.480 14.720 0.794 Senegal 0.384 0.552 0.581 0.596 Senegal-Dakar 0.51 0.712
Harare 31.050 -17.820 0.899 Zimbabwe 0.451 0.542 0.493 0.864 Zimbabwe-Harare 0.246 0.338
Dar es Salaam 39.280 -6.820 0.607 United Republic of Tanzania 0.371 0.53 0.571 0.822 United Republic of Tanzania-Dar es Salaam 0.427 0.767
Lusaka 28.29 -15.42 0.59 Zambia 0.463 0.507 0.434 0.766 Zambia-Lusaka 0.316 0.233
Niamey 2.120 13.520 0.485 Niger 0.426 0.456 0.482 0.521 Niger-Niamey 0.402 0.602
Bamako -7.990 12.650 0.544 Mali 0.416 0.452 0.491 0.46 Mali-Bamako 0.401 0.683
Antananarivo 47.510 -18.890 0.511 Madagascar 0.558 0.446 0.465 0.812 Madagascar-Antananarivo 0.171 0.552
Conakry -13.670 9.550 0.607 Guinea 0.461 0.416 0.449 0.809 Guinea-Conakry 0.133 0.612
Monrovia -10.800 6.310 0.411 Liberia 0.381 0.285 0.313 0.886 Liberia-Monrovia 0.048 0.457
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
#tooltip-container {
position: absolute;
background-color: #fff;
color: #050;
padding: 10px;
border: 1px solid;
display: none;
}
.tooltip_key {
font-weight: bold;
}
.tooltip_value {
margin-left: 20px;
float: right;
}
</style>
<body>
<div id="tooltip-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 600;
var projection = d3.geo.mercator()
.scale((width + 1) / 3 / Math.PI)
.translate([width / 2, height /3.5])
.center([0, 50 ]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("world-topo-min.json", function(error, topology) {
// load and display the cities
d3.csv("data.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.City;}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", function(d){return 8*d["CPI-5"]})
.style("fill", "blue")
.style("opacity", .7)
.on("mouseover", function(d) {
var html = "";
html += "<div class=\"tooltip_kv\">";
html += "<span class=\"tooltip_key\">";
html += d.City+": "+d["CPI-5"];
html += "</span>";
html += "<br>";
html += "<span class=\"tooltip_value\">";
html += "<table border=\"1\">";
html += "<tr>";
html += "<td>"+"Infrastructure"+"</td>";
html += "<td>"+"Quality of Life"+"</td>";
html += "<td>"+"Environment"+"</td>";
html += "<td>"+"Productivity"+"</td>";
html += "<td>"+"Equity"+"</td>";
html += "</tr>";
html += "<tr>";
html += "<td>"+d["Infrastructure_Index"]+"</td>";
html += "<td>"+d["Quality_of_Life_Index"]+"</td>";
html += "<td>"+d["Environmental_Index"]+"</td>";
html += "<td>"+d["Productivity_Index"]+"</td>";
html += "<td>"+d["Equity_Index"]+"</td>";
html += "</tr>";
html += "</table>";
html += "</span>";
html += "<br>";
html += "</div>";
$("#tooltip-container").html(html);
$(this).attr("stroke", "red");
$(this).attr("fill-opacity", "0.8");
$("#tooltip-container").show();
})
.on("mouseout", function(d) {
$(this).attr("fill-opacity", "1.0");
$(this).attr("stroke", "blue");
$("#tooltip-container").hide();
});
});
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
</body>
</html>
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