My tribute to Hans Rosling

README.md

My tribute to Hans Rosling.

Based on Gapminder Subset, data and design by Gapminder, of course.

Not your cleanest code.

datapoints.json

{"dataset":"open-numbers/ddf--gapminder--systema_globalis","version":"82f78c9","headers":["geo","time","income_per_person_gdppercapita_ppp_inflation_adjusted","life_expectancy_years","population_total"],"rows":[["afg","2015",1925,53.8,32526562],["alb","2015",10620,78,2896679],["dza","2015",13434,76.4,39666519],["and","2015",46577,84.8,91672],["ago","2015",7615,59.6,25021974],["atg","2015",21049,76.4,91818],["arg","2015",17344,76.5,43416755],["arm","2015",7763,74.7,3017712],["abw","2015",37138,75.72,103889],["aus","2015",44056,82.3,23968973],["aut","2015",44401,81.3,8544586],["aze","2015",16986,72.9,9753968],["bhs","2015",22818,73.7,388019],["bhr","2015",44138,79.1,1377237],["bgd","2015",3161,70.4,160995642],["brb","2015",12984,75.7,284215],["blr","2015",17415,71,9495826],["bel","2015",41240,80.5,11299192],["blz","2015",8501,71.7,359287],["ben","2015",1830,62.3,10879829],["bmu","2015",47081,78.5,65576],["btn","2015",7983,72.7,774830],["bol","2015",6295,73.2,10724705],["bih","2015",9833,78.9,3810416],["bwa","2015",17196,58.7,2262485],["bra","2015",15441,74.4,207847528],["brn","2015",73003,77.1,423188],["bgr","2015",16371,74.8,7149787],["bfa","2015",1654,60.9,18105570],["bdi","2015",777,61.4,11178921],["khm","2015",3267,69.4,15577899],["cmr","2015",2897,59.4,23344179],["can","2015",43294,81.7,35939927],["cpv","2015",6514,72.9,520502],["caf","2015",599,49.6,4900274],["tcd","2015",2191,57.4,14037472],["chl","2015",22465,79.4,17948141],["chn","2015",13334,76.2,1376048943],["col","2015",12761,78,48228704],["com","2015",1472,68.1,788474],["cod","2015",809,60.8,77266814],["cog","2015",6220,61.5,4620330],["cri","2015",14132,80.3,4807850],["civ","2015",3491,59.1,22701556],["hrv","2015",20260,77.8,4240317],["cub","2015",20122,78.2,11389562],["cyp","2015",29797,81.8,1165300],["cze","2015",29437,78.8,10543186],["dnk","2015",43495,80.4,5669081],["dji","2015",3139,63.8,887861],["dma","2015",10503,73.1,67784],["dom","2015",12837,75.3,10528391],["ecu","2015",10996,75.9,16144363],["egy","2015",11031,71.5,91508084],["slv","2015",7776,74.9,6126583],["gnq","2015",31087,61,845060],["eri","2015",1129,60.7,5227791],["est","2015",26812,77.8,1312558],["eth","2015",1520,65.2,99390750],["fji","2015",7925,65.8,892145],["fin","2015",38923,80.9,5503457],["fra","2015",37599,81.8,64395345],["gab","2015",18627,65.9,1725292],["gmb","2015",1644,68.1,1990924],["geo","2015",7474,72.9,3999812],["deu","2015",44053,80.8,80688545],["gha","2015",4099,65.3,27409893],["grc","2015",25430,81,10954617],["grl","2015",27763,72.1,57272],["grd","2015",11593,71.5,106825],["gtm","2015",7279,72.6,16342897],["gin","2015",1225,59.1,12608590],["gnb","2015",1386,55.6,1844325],["guy","2015",6816,66.8,767085],["hti","2015",1710,64.3,10711067],["hnd","2015",4270,73,8075060],["hkg","2015",53874,83.73,7287983],["hun","2015",24200,76.7,9855023],["isl","2015",42182,83.3,329425],["ind","2015",5903,67.2,1311050527],["idn","2015",10504,71.1,257563815],["irn","2015",15573,74.6,79109272],["irq","2015",14646,67.4,36423395],["irl","2015",47758,81.7,4688465],["isr","2015",31590,82.1,8064036],["ita","2015",33297,82.2,59797685],["jam","2015",8606,75,2793335],["jpn","2015",36162,83.2,126573481],["jor","2015",11752,78.5,7594547],["kaz","2015",23468,70.2,17625226],["ken","2015",2898,65.1,46050302],["kir","2015",1824,63,112423],["kwt","2015",82633,80.3,3892115],["kgz","2015",3245,69.8,5939962],["lao","2015",5212,67.1,6802023],["lva","2015",23282,75.4,1970503],["lbn","2015",17050,78.9,5850743],["lso","2015",2598,47.1,2135022],["lbr","2015",958,63.2,4503438],["lby","2015",17261,74.1,6278438],["ltu","2015",26665,75.2,2878405],["lux","2015",88314,82.2,567110],["mac","2015",148374,80.82,587606],["mkd","2015",12547,76.5,2078453],["mdg","2015",1400,63.5,24235390],["mwi","2015",799,60.5,17215232],["mys","2015",24320,75.3,30331007],["mdv","2015",14408,80,363657],["mli","2015",1684,60.2,17599694],["mlt","2015",30265,82.1,418670],["mhl","2015",3661,66.9,58567],["mrt","2015",3877,69.7,4067564],["mus","2015",18350,74.5,1273212],["mex","2015",16850,75.9,127017224],["fsm","2015",3510,68.9,104460],["mda","2015",4896,73.9,4068897],["mng","2015",11819,67.1,2959134],["mne","2015",14833,77.2,625781],["mar","2015",7319,74.6,34377511],["moz","2015",1176,57.1,27977863],["mmr","2015",4012,68,53897154],["nam","2015",10040,64.2,2458830],["npl","2015",2352,69.7,28513700],["nld","2015",45784,81.3,16924929],["nzl","2015",34186,81.4,4528526],["nic","2015",4712,78,6082032],["ner","2015",943,61,19899120],["nga","2015",5727,64.6,182201962],["prk","2015",1390,72.1,25155317],["nor","2015",64304,82,5210967],["omn","2015",48226,77.2,4490541],["pak","2015",4743,65.9,188924874],["pan","2015",20485,78.2,3929141],["png","2015",2529,60.9,7619321],["pry","2015",8219,74.4,6639123],["per","2015",11903,79.5,31376670],["phl","2015",6876,71,100699395],["pol","2015",24787,77.6,38611794],["prt","2015",26437,80.8,10349803],["pri","2015",33604,78.5,3683238],["qat","2015",132877,79.7,2235355],["rou","2015",19203,75.2,19511324],["rus","2015",23038,71,143456918],["rwa","2015",1549,65.9,11609666],["wsm","2015",5558,73.2,193228],["stp","2015",3003,68,190344],["sau","2015",52469,79.5,31540372],["sen","2015",2251,65.3,15129273],["srb","2015",12908,76.2,8850975],["syc","2015",25684,74.1,96471],["sle","2015",2085,57.1,6453184],["sgp","2015",80794,82,5603740],["svk","2015",27204,77.6,5426258],["svn","2015",28550,80.9,2067526],["slb","2015",2047,64,583591],["som","2015",624,54.2,10787104],["zaf","2015",12509,61.3,54490406],["kor","2015",34644,81,50293439],["ssd","2015",3047,56.1,12339812],["esp","2015",32979,82.6,46121699],["lka","2015",10624,77.6,20715010],["lca","2015",9997,74.8,184999],["vct","2015",10435,71.2,109462],["sdn","2015",3975,67.5,40234882],["sur","2015",17125,72,542975],["swz","2015",6095,51.8,1286970],["swe","2015",44892,82.1,9779426],["che","2015",56118,83,8298663],["syr","2015",3500,68.2,18502413],["twn","2015",42948,79.5,23212000],["tjk","2015",2582,72.4,8481855],["tza","2015",2571,64.1,53470420],["tha","2015",14512,74.7,67959359],["tls","2015",2086,72.4,1184765],["tgo","2015",1433,61.5,7304578],["ton","2015",5069,71.5,106170],["tto","2015",30113,72.4,1360088],["tun","2015",11126,77.6,11253554],["tur","2015",19360,79.2,78665830],["tkm","2015",15865,70,5373502],["uga","2015",1680,61.3,39032383],["ukr","2015",8449,71.5,44823765],["are","2015",60749,75.4,9156963],["gbr","2015",38225,81,64715810],["usa","2015",53354,79.1,321773631],["ury","2015",20438,76.8,3431555],["uzb","2015",5598,71.8,29893488],["vut","2015",2912,64.9,264652],["ven","2015",15753,74.8,31108083],["vnm","2015",5623,75.4,93447601],["pse","2015",4319,74.6,4668466],["yem","2015",3887,66,26832215],["zmb","2015",4034,56.7,16211767],["zwe","2015",1801,59.3,15602751]],"language":"en"}

geo.json

{"dataset":"open-numbers/ddf--gapminder--systema_globalis","version":"82f78c9","headers":["geo","name","world_4region"],"rows":[["abkh","Abkhazia","europe"],["afg","Afghanistan","asia"],["akr_a_dhe","Akrotiri and Dhekelia","europe"],["alb","Albania","europe"],["dza","Algeria","africa"],["asm","American Samoa","asia"],["and","Andorra","europe"],["ago","Angola","africa"],["aia","Anguilla","americas"],["ata","Antarctica","europe"],["atg","Antigua and Barbuda","americas"],["arg","Argentina","americas"],["arm","Armenia","europe"],["abw","Aruba","americas"],["aus","Australia","asia"],["aut","Austria","europe"],["aze","Azerbaijan","europe"],["bhs","Bahamas","americas"],["bhr","Bahrain","asia"],["bgd","Bangladesh","asia"],["brb","Barbados","americas"],["blr","Belarus","europe"],["bel","Belgium","europe"],["blz","Belize","americas"],["ben","Benin","africa"],["bmu","Bermuda","americas"],["btn","Bhutan","asia"],["bol","Bolivia","americas"],["bih","Bosnia and Herzegovina","europe"],["bwa","Botswana","africa"],["bouisl","Bouvet Island","africa"],["bra","Brazil","americas"],["iot","British Indian Ocean Territory","asia"],["vgb","British Virgin Islands","americas"],["brn","Brunei","asia"],["bgr","Bulgaria","europe"],["bfa","Burkina Faso","africa"],["bdi","Burundi","africa"],["khm","Cambodia","asia"],["cmr","Cameroon","africa"],["can","Canada","americas"],["cpv","Cape Verde","africa"],["cym","Cayman Islands","americas"],["caf","Central African Republic","africa"],["tcd","Chad","africa"],["chanisl","Channel Islands","europe"],["chl","Chile","americas"],["chn","China","asia"],["cxr","Christmas Island","asia"],["fra_clipperton","Clipperton",""],["cck","Cocos Island","asia"],["col","Colombia","americas"],["com","Comoros","africa"],["cod","Congo, Dem. Rep.","africa"],["cog","Congo, Rep.","africa"],["cok","Cook Is","asia"],["cri","Costa Rica","americas"],["civ","Cote d'Ivoire","africa"],["hrv","Croatia","europe"],["cub","Cuba","americas"],["nld_curacao","Curaçao","americas"],["cyp","Cyprus","europe"],["cze","Czech Republic","europe"],["cheslo","Czechoslovakia","europe"],["dnk","Denmark","europe"],["dji","Djibouti","africa"],["dma","Dominica","americas"],["dom","Dominican Republic","americas"],["deu_east","East Germany","europe"],["ecu","Ecuador","americas"],["egy","Egypt","africa"],["slv","El Salvador","americas"],["gnq","Equatorial Guinea","africa"],["eri","Eritrea","africa"],["eri_a_eth","Eritrea and Ethiopia","africa"],["est","Estonia","europe"],["eth","Ethiopia","africa"],["fro","Faeroe Islands","europe"],["flk","Falkland Is (Malvinas)","americas"],["fji","Fiji","asia"],["fin","Finland","europe"],["fra","France","europe"],["guf","French Guiana","americas"],["pyf","French Polynesia","asia"],["fra_antarc","French Southern and Antarctic Lands",""],["gab","Gabon","africa"],["gmb","Gambia","africa"],["pse_gaza","Gaza Strip","asia"],["geo","Georgia","europe"],["deu","Germany","europe"],["gha","Ghana","africa"],["gib","Gibraltar","europe"],["grc","Greece","europe"],["grl","Greenland","europe"],["grd","Grenada","americas"],["glp","Guadeloupe","americas"],["gum","Guam","asia"],["gtm","Guatemala","americas"],["gbg","Guernsey","europe"],["gin","Guinea","africa"],["gnb","Guinea-Bissau","africa"],["guy","Guyana","americas"],["hti","Haiti","americas"],["heard_a_mcd","Heard and McDonald Islands","asia"],["hos","Holy See","europe"],["hnd","Honduras","americas"],["hkg","Hong Kong, China","asia"],["hun","Hungary","europe"],["isl","Iceland","europe"],["ind","India","asia"],["idn","Indonesia","asia"],["irn","Iran","asia"],["irq","Iraq","asia"],["irl","Ireland","europe"],["gbm","Isle of Man","europe"],["isr","Israel","asia"],["ita","Italy","europe"],["jam","Jamaica","americas"],["jpn","Japan","asia"],["jey","Jersey","europe"],["jor","Jordan","asia"],["kaz","Kazakhstan","asia"],["ken","Kenya","africa"],["kir","Kiribati","asia"],["kos","Kosovo","europe"],["kwt","Kuwait","asia"],["kgz","Kyrgyz Republic","asia"],["lao","Lao","asia"],["lva","Latvia","europe"],["lbn","Lebanon","asia"],["lso","Lesotho","africa"],["lbr","Liberia","africa"],["lby","Libya","africa"],["lie","Liechtenstein","europe"],["ltu","Lithuania","europe"],["lux","Luxembourg","europe"],["mac","Macao, China","asia"],["mkd","Macedonia, FYR","europe"],["mdg","Madagascar","africa"],["mwi","Malawi","africa"],["mys","Malaysia","asia"],["mdv","Maldives","asia"],["mli","Mali","africa"],["mlt","Malta","europe"],["mhl","Marshall Islands","asia"],["mtq","Martinique","americas"],["mrt","Mauritania","africa"],["mus","Mauritius","africa"],["myt","Mayotte","africa"],["mex","Mexico","americas"],["fsm","Micronesia, Fed. Sts.","asia"],["mda","Moldova","europe"],["mco","Monaco","europe"],["mng","Mongolia","asia"],["mne","Montenegro","europe"],["msr","Montserrat","americas"],["mar","Morocco","africa"],["moz","Mozambique","africa"],["mmr","Myanmar","asia"],["nam","Namibia","africa"],["nru","Nauru","asia"],["npl","Nepal","asia"],["nld","Netherlands","europe"],["ant","Netherlands Antilles","americas"],["ncl","New Caledonia","asia"],["nzl","New Zealand","asia"],["ngokar","Ngorno-Karabakh","europe"],["nic","Nicaragua","americas"],["ner","Niger","africa"],["nga","Nigeria","africa"],["niu","Niue","asia"],["nfk","Norfolk Island","asia"],["prk","North Korea","asia"],["yem_north","North Yemen (former)","asia"],["cyp_nor","Northern Cyprus","europe"],["mnp","Northern Mariana Islands","asia"],["north_mar","Northern Marianas","asia"],["nor","Norway","europe"],["omn","Oman","asia"],["pak","Pakistan","asia"],["plw","Palau","asia"],["pan","Panama","americas"],["png","Papua New Guinea","asia"],["pry","Paraguay","americas"],["per","Peru","americas"],["phl","Philippines","asia"],["pcn","Pitcairn","asia"],["pol","Poland","europe"],["prt","Portugal","europe"],["pri","Puerto Rico","americas"],["qat","Qatar","asia"],["reu","Reunion","africa"],["rou","Romania","europe"],["rus","Russia","europe"],["rwa","Rwanda","africa"],["wsm","Samoa","asia"],["smr","San Marino","europe"],["stp","Sao Tome and Principe","africa"],["sau","Saudi Arabia","asia"],["sen","Senegal","africa"],["srb","Serbia","europe"],["scg","Serbia and Montenegro","europe"],["scg_ex_kos","Serbia excluding Kosovo","europe"],["syc","Seychelles","africa"],["sle","Sierra Leone","africa"],["sgp","Singapore","asia"],["sxm","Sint Maarten (Dutch part)","americas"],["svk","Slovak Republic","europe"],["svn","Slovenia","europe"],["slb","Solomon Islands","asia"],["som","Somalia","africa"],["som_somland","Somaliland","africa"],["zaf","South Africa","africa"],["sgero_a_ssandw","South Georgia and the South Sandwich Islands","americas"],["kor","South Korea","asia"],["sosset","South Ossetia","europe"],["ssd","South Sudan","africa"],["yem_south","South Yemen (former)","asia"],["esp","Spain","europe"],["lka","Sri Lanka","asia"],["stbar","St. Barthélemy","americas"],["shn","St. Helena","africa"],["kna","St. Kitts and Nevis","americas"],["lca","St. Lucia","americas"],["stmar","St. Martin","americas"],["maf","St. Martin (French part)","americas"],["vct","St. Vincent and the Grenadines","americas"],["spm","St.-Pierre-et-Miquelon","americas"],["sdn","Sudan","africa"],["sur","Suriname","americas"],["sjm","Svalbard","europe"],["swz","Swaziland","africa"],["swe","Sweden","europe"],["che","Switzerland","europe"],["syr","Syria","asia"],["twn","Taiwan","asia"],["tjk","Tajikistan","asia"],["tza","Tanzania","africa"],["tha","Thailand","asia"],["tls","Timor-Leste","asia"],["tgo","Togo","africa"],["tkl","Tokelau","asia"],["ton","Tonga","asia"],["transn","Transnistria","europe"],["tto","Trinidad and Tobago","americas"],["tun","Tunisia","africa"],["tur","Turkey","europe"],["tkm","Turkmenistan","asia"],["tca","Turks and Caicos Islands","americas"],["tuv","Tuvalu","asia"],["usa_minor_out_isl","US Minor Outlying Islands","americas"],["ussr","USSR","europe"],["uga","Uganda","africa"],["ukr","Ukraine","europe"],["are","United Arab Emirates","asia"],["gbr","United Kingdom","europe"],["korea_union","United Korea (former)","asia"],["usa","United States","americas"],["ury","Uruguay","americas"],["uzb","Uzbekistan","asia"],["vut","Vanuatu","asia"],["ven","Venezuela","americas"],["vnm","Vietnam","asia"],["virg_isl","Virgin Islands","americas"],["vir","Virgin Islands (U.S.)","americas"],["wlf","Wallis et Futuna","asia"],["pse_west_bank","West Bank","asia"],["pse","Palestine","asia"],["deu_west","West Germany","europe"],["esh","Western Sahara","africa"],["yem","Yemen","asia"],["yug","Yugoslavia","europe"],["zmb","Zambia","africa"],["zwe","Zimbabwe","africa"],["ala","Åland","europe"]],"language":"en"}

index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<title>My tribute to Hans Rosling</title>
<style>
body{
  font-family: 'Quicksand', sans-serif;
}

text {
  font-family: 'Quicksand', sans-serif;
  font-size: 12px;
}
  
text.seventeen {
  font-size: 300px;
  fill: #e1e1e1;
  letter-spacing: 30px;
}
 
text.fourtyseven {
  font-size: 32px;
  letter-spacing: 10px;
  fill: #e1e1e1;
}
  
text.rosling {
  font-size: 140px;
  fill: #000000;
}
  
text.thanks {
  font-size: 50px;
  fill: #000000;
}

.dot {
  stroke: #000;
  opacity: 1;
}
  
.dot2 {
  opacity: 1;
}

.axis path, .axis line {
  fill: none;
  stroke: rgb(153, 153, 153);
  shape-rendering: crispEdges;
}

.y.label, .x.label {
    font-size: 20px;
  }

g.tick text, .label {
  fill: rgb(153, 153, 153);
}
  
button {
  border-radius: 40px;
  font-size: 1em;
  width: 40px;
  height: 40px;
  background: #fff;
  display: block;
  border: 0;
  padding: 0;
  margin: 5px;
  cursor: pointer;
}

</style>
</head>
<body>
  <button id="animate">
  <svg class="vzb-icon vzb-icon-play" viewBox="3 3 42 42" xmlns="http://www.w3.org/2000/svg">
    <path xmlns="http://www.w3.org/2000/svg" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"></path>
  </svg>
</button>
<div id="chart"></div>


<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

// Chart dimensions.
var margin = {top: 19.5, right: 32, bottom: 40, left: 32},
    width = 960 - margin.right - margin.left,
    height = 600 - margin.top - margin.bottom;
var colorscheme = ["#ff5872", "#7feb00", "#00d5e9", "#ffe700"];


// Create the SVG container and set the origin.
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Various scales. These domains make assumptions of data
var xScale = d3.scaleLog().domain([400, 82000]).range([0, width]),
    yScale = d3.scaleLinear().domain([20, 85]).range([height, 0]),
    radiusScale = d3.scaleSqrt().domain([0, 5e8]).range([3, 40]),
    colorScale = d3.scaleOrdinal(colorscheme);

// The x & y axes
var xAxis = d3.axisBottom(xScale)
  .tickValues([500, 1000, 2000, 4000, 8000, 16000, 32000, 64000, 128000])
  .tickFormat(function (d) {
      if ((d / 10000) >= 1) {
        d = d / 1000 + "k";
      }
      return d;
    })
  .tickSize(0),
    yAxis = d3.axisLeft(yScale)
    .tickValues([20, 30, 40, 50, 60, 70, 80])
    .tickSize(0);

// Add the x-axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the y-axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// Add an x-axis title
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height + 32)
    .text("Income per person, GDP/capita in $/year adjusted for inflation & prices");

// Add a y-axis title
svg.append("text")
    .attr("class", "y label")
    .attr("y", -20)
    .attr("x", -22)
    .attr("dy", ".75em")
    .text("Life expectancy (years)");
  
svg.append("text")
    .attr("class", "rosling")
    .attr("text-anchor", "middle")
    .attr("y", 3*height/4 - 100)
    .attr("x", width/2)
    .text("Hans Rosling")
    .style("opacity", 0);

svg.append("text")
    .attr("class", "yearlabel seventeen")
    .attr("text-anchor", "middle")
    .attr("y", 3*height/4 - 30)
    .attr("x", width/2)
    .text("2017");
  
svg.append("text")
    .attr("class", "yearlabel fourtyseven")
    .attr("text-anchor", "middle")
    .attr("y", 3*height/4 - 30)
    .attr("x", 3*width/4 - 5)
    .text("1948 - ")
    .style("opacity", 0);
  
svg.append("text")
    .attr("class", "thanks")
    .attr("text-anchor", "middle")
    .attr("y", height - 70)
    .attr("x", width/2)
    .text("Thank you, professor. Rest in peace.")
    .style("opacity", 0);
  
var dropPath = 'M 243.44676,222.01677 C 243.44676,288.9638 189.17548,343.23508 122.22845,343.23508 C 55.281426,343.23508 1.0101458,288.9638 1.0101458,222.01677 C 1.0101458,155.06975 40.150976,142.95572 122.22845,0.79337431 C 203.60619,141.74374 243.44676,155.06975 243.44676,222.01677 z';
  
d3.select("#animate").on("click", function(){
  d3.select(".seventeen")
    .transition().delay(4000).duration(6000)
    .attr("x", 3*width/4 + 135)
    .style("font-size", "32px")
    .style("letter-spacing", "10px");
  d3.select(".fourtyseven")
    .transition().delay(10000).duration(2000)
    .style("opacity", 1);
  
  d3.select(".rosling")
    .transition().delay(10000).duration(2000)
    .style("opacity", 1);
  d3.select(".thanks")
    .transition().delay(12000).duration(2000)
    .style("opacity", 1);
  
  d3.selectAll(".dot")
    .transition()
    .delay(function(d,i) { return i*100; })
    .style("opacity", 0);
  
  d3.selectAll(".dot2").transition().duration(4000)
    .delay(function(d,i) { return i*100; })
    .attr("cy", function() {return Math.random()*100; })
    .style("opacity", 0.1);
  
  d3.selectAll(".drop")
    .transition().duration(4000).delay(function(d,i) { return i*100; })
    .style("opacity", 1)
    .attr("transform", function(d, i){
        return 'translate('+[xScale(+d.gdp) - radiusScale(+d.pop)*1.2, height+50] + ') scale('+radiusScale(+d.pop)*0.01+','+ radiusScale(+d.pop)*0.01+')';})
});

// Load the data
  
d3.queue()
  .defer(d3.json, 'datapoints.json')
  .defer(d3.json, 'geo.json')
  .await(function(error, nations, geo) {
  
  var nationsdata = [];
  nations.rows.forEach(function(d) {
    var obj = {};
    obj.countrycode = d[0];
    var geodata = geo.rows.filter(function(ccode){
      return ccode[0] == d[0];
    });
    obj.name = geodata[0][1];
    obj.region = geodata[0][2];
    obj.lifeexp = d[3];
    obj.gdp = d[2];
    obj.pop = d[4];
    nationsdata.push(obj);
    return nationsdata;
  });
  
  var dotGroup2 = svg.append("g");
  var dotGroup = svg.append("g");
   
  var dots = dotGroup.selectAll("circle")
      .data(nationsdata.sort(order));
  var dots2 = dotGroup2.selectAll("circle")
      .data(nationsdata.sort(order));
      
  dots2  	  
      .enter().append("circle")
      .attr("class", "dot2")
      .attr("id", function(d){ return d.countrycode; })
      .attr("cx", function(d) { return xScale(+d.gdp); })
      .attr("cy", function(d) { return yScale(+d.lifeexp); })
      .attr("r", function(d) { return radiusScale(+d.pop); })
      .style("fill", function(d) { return colorScale(d.region); })
  	  .append("title");
  
  dots  	  
      .enter().append("circle")
      .attr("class", "dot")
      .attr("id", function(d){ return d.countrycode; })
      .attr("cx", function(d) { return xScale(+d.gdp); })
      .attr("cy", function(d) { return yScale(+d.lifeexp); })
      .attr("r", function(d) { return radiusScale(+d.pop); })
      .style("fill", function(d) { return colorScale(d.region); })
  	  .append("title");
  
  svg.selectAll('g.drop').data(nationsdata.sort(order))
      .enter().append('g')
      .attr("class", "drop")
      .attr("transform", function(d, i){
        return 'translate('+[xScale(+d.gdp) - radiusScale(+d.pop)*1.2, yScale(+d.lifeexp)- radiusScale(+d.pop)*1.2]+') scale('+radiusScale(+d.pop)*0.01+','+ radiusScale(+d.pop)*0.01+')';
      })
      .style("opacity", 0)
      .append('path').attr("d", dropPath)
      .style("fill", "none")
      .style("stroke", "#000000")
      .style("stroke-width", 10);
  
  // Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return +b.pop - +a.pop;
  }
});

</script>
</body>

thumbnail.png