Global Bilateral Migration

0_spheres_of_influence

(title)

README.md

This interactive graph, using data from the World Bank's Global Migration Database shows links between migrants' locations and their countries of birth. The slider bar allows for different cut-off levels for the graph, and the year is selected by scrolling over it.

countrynames.json

{"DZA": "Algeria",
"AGO": "Angola",
"EGY": "Egypt, Arab Rep.",
"BGD": "Bangladesh",
"NER": "Niger",
"LIE": "Liechtenstein",
"NAM": "Namibia",
"VEN": "Venezuela, RB",
"BGR": "Bulgaria",
"BOL": "Bolivia",
"GHA": "Ghana",
"PAK": "Pakistan",
"CPV": "Cape Verde",
"JOR": "Jordan",
"LBR": "Liberia",
"LBY": "Libya",
"MYS": "Malaysia",
"PRI": "Puerto Rico",
"MYT": "Mayotte",
"PRK": "Korea, Dem. Rep.",
"PSE": "West Bank and Gaza",
"TZA": "Tanzania",
"BWA": "Botswana",
"KHM": "Cambodia",
"TTO": "Trinidad and Tobago",
"PRY": "Paraguay",
"HKG": "Hong Kong SAR, China",
"SAU": "Saudi Arabia",
"LBN": "Lebanon",
"SVN": "Slovenia",
"BFA": "Burkina Faso",
"SVK": "Slovak Republic",
"MRT": "Mauritania",
"CHI": "Channel Islands",
"HRV": "Croatia",
"CHL": "Chile",
"CHN": "China",
"SMR": "San Marino",
"JAM": "Jamaica",
"GIB": "Gibraltar",
"DJI": "Djibouti",
"GIN": "Guinea",
"FIN": "Finland",
"URY": "Uruguay",
"THA": "Thailand",
"SYC": "Seychelles",
"NPL": "Nepal",
"LAO": "Lao PDR",
"YEM": "Yemen, Rep.",
"PHL": "Philippines",
"ZAF": "South Africa",
"KIR": "Kiribati",
"TGO": "Togo",
"VIR": "Virgin Islands (U.S.)",
"SYR": "Syrian Arab Republic",
"MAC": "Macao SAR, China",
"NIC": "Nicaragua",
"MLT": "Malta",
"KAZ": "Kazakhstan",
"TCA": "Turks and Caicos Islands",
"PYF": "French Polynesia",
"NIU": "Niue",
"DMA": "Dominica",
"KSV": "Kosovo",
"BEN": "Benin",
"GUF": "French Guiana",
"BEL": "Belgium",
"DEU": "Germany",
"GUM": "Guam",
"LKA": "Sri Lanka",
"FLK": "Falkland Islands (Malvinas)",
"GBR": "United Kingdom",
"GUY": "Guyana",
"CRI": "Costa Rica",
"COK": "Cook Islands",
"MAR": "Morocco",
"ROM": "Romania",
"MNP": "Northern Mariana Islands",
"LSO": "Lesotho",
"HUN": "Hungary",
"TKM": "Turkmenistan",
"SUR": "Suriname",
"NLD": "Netherlands",
"BMU": "Bermuda",
"TCD": "Chad",
"GEO": "Georgia",
"MNE": "Montenegro",
"MNG": "Mongolia",
"SDN": "Sudan",
"MHL": "Marshall Islands",
"MTQ": "Martinique",
"zzz": "Refugees",
"BLZ": "Belize",
"NFK": "Norfolk Island",
"MMR": "Myanmar",
"AFG": "Afghanistan",
"BDI": "Burundi",
"VGB": "Virgin Islands, British",
"BLR": "Belarus",
"GRD": "Grenada",
"TKL": "Tokelau",
"GRC": "Greece",
"GRL": "Greenland",
"SHN": "Saint Helena",
"AND": "Andorra",
"MOZ": "Mozambique",
"TJK": "Tajikistan",
"HTI": "Haiti",
"MEX": "Mexico",
"ANT": "Netherlands Antilles",
"ZWE": "Zimbabwe",
"LCA": "St. Lucia",
"IND": "India",
"LVA": "Latvia",
"BTN": "Bhutan",
"VCT": "St. Vincent and the Grenadines",
"VNM": "Vietnam",
"NOR": "Norway",
"CZE": "Czech Republic",
"ATG": "Antigua and Barbuda",
"FJI": "Fiji",
"HND": "Honduras",
"MUS": "Mauritius",
"DOM": "Dominican Republic",
"LUX": "Luxembourg",
"ISR": "Israel",
"FSM": "Micronesia, Fed. Sts.",
"PER": "Peru",
"REU": "Reunion",
"IDN": "Indonesia",
"VUT": "Vanuatu",
"MKD": "Macedonia, FYR",
"COD": "Congo, Dem. Rep.",
"COG": "Congo, Rep.",
"ISL": "Iceland",
"GLP": "Guadeloupe",
"ETH": "Ethiopia",
"COM": "Comoros",
"COL": "Colombia",
"NGA": "Nigeria",
"PRT": "Portugal",
"MDA": "Moldova",
"STP": "Sao Tome and Principe",
"MDG": "Madagascar",
"ECU": "Ecuador",
"SEN": "Senegal",
"MDV": "Maldives",
"ASM": "American Samoa",
"SPM": "Saint Pierre and Miquelon",
"SRB": "Serbia",
"FRA": "France",
"LTU": "Lithuania",
"RWA": "Rwanda",
"ZMB": "Zambia",
"GMB": "Gambia, The",
"WLF": "Wallis and Futuna",
"FRO": "Faeroe Islands",
"GTM": "Guatemala",
"DNK": "Denmark",
"MSR": "Montserrat",
"AUS": "Australia",
"AUT": "Austria",
"IMY": "Isle of Man",
"PLW": "Palau",
"KEN": "Kenya",
"TUR": "Turkey",
"ALB": "Albania",
"OMN": "Oman",
"TUV": "Tuvalu",
"ITA": "Italy",
"BRN": "Brunei Darussalam",
"TUN": "Tunisia",
"RUS": "Russian Federation",
"BRB": "Barbados",
"BRA": "Brazil",
"CIV": "Cote d'Ivoire",
"TLS": "Timor-Leste",
"GNQ": "Equatorial Guinea",
"USA": "United States",
"QAT": "Qatar",
"WSM": "Samoa",
"AZE": "Azerbaijan",
"GNB": "Guinea-Bissau",
"SWZ": "Swaziland",
"TON": "Tonga",
"CAN": "Canada",
"UKR": "Ukraine",
"KOR": "Korea, Rep.",
"AIA": "Anguilla",
"CAF": "Central African Republic",
"CHE": "Switzerland",
"CYP": "Cyprus",
"BIH": "Bosnia and Herzegovina",
"SGP": "Singapore",
"TWN": "Taiwan, China",
"SOM": "Somalia",
"UZB": "Uzbekistan",
"CMR": "Cameroon",
"POL": "Poland",
"KWT": "Kuwait",
"ERI": "Eritrea",
"GAB": "Gabon",
"CYM": "Cayman Islands",
"ARE": "United Arab Emirates",
"EST": "Estonia",
"MWI": "Malawi",
"ESP": "Spain",
"IRQ": "Iraq",
"SLV": "El Salvador",
"MLI": "Mali",
"IRL": "Ireland",
"IRN": "Iran, Islamic Rep.",
"ABW": "Aruba",
"SLE": "Sierra Leone",
"KNA": "St. Kitts and Nevis",
"PAN": "Panama",
"SCG": "Serbia and Montenegro",
"SLB": "Solomon Islands",
"NZL": "New Zealand",
"MCO": "Monaco",
"JPN": "Japan",
"KGZ": "Kyrgyz Republic",
"UGA": "Uganda",
"NCL": "New Caledonia",
"PNG": "Papua New Guinea",
"ARG": "Argentina",
"SWE": "Sweden",
"BHS": "Bahamas, The",
"BHR": "Bahrain",
"ARM": "Armenia",
"NRU": "Naura",
"CUB": "Cuba"}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  stroke: #ccc;
  stroke-width: 1.5px;
  stroke-opacity: 0.5;
}

.node ellipse {
  fill: #fff;
  stroke: #000;
  stroke-width: 0.5px;
}

.node text {
  pointer-events: none;
  font: 10px sans-serif;
}

.axis {
  opacity: 0.5;
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 4px;
  stroke-linecap: round;
}

.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 3px;
  stroke-linecap: round;
}

.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  cursor: grab;
}

</style>

<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 750;
var height = 350;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("g").attr("class","linkg");
svg.append("g").attr("class","nodeg");
    
var force = d3.layout.force()
    .size([width - 100, height])
    .nodes([{}])
    .gravity(0.2)
    .charge(-200);

var x = d3.scale.linear()
    .domain([500000, 5000000])
    .range([250, 80])
    .clamp(true);

var brush = d3.svg.brush()
    .y(x)
    .extent([0, 0]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + (width - 20)  + ",0)")
    .call(d3.svg.axis()
      .scale(x)
      .orient("left")
      .tickFormat(function(d) { return d / 1000000.0 ; })
      .tickSize(0)
      .tickPadding(12))
  .select(".domain")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "halo");

var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);

slider.selectAll(".extent,.resize")
    .remove();

var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(" + (width - 20) + ",0)")
    .attr("r", 5);


svg.append("text")
    .attr("x", width - 15)
    .attr("y", height - 75)
    .attr("text-anchor", "end")
    .attr("font-size", "10px")
    .style("opacity", 0.5)
    .text("> x million")

svg.append("text")
    .attr("x", width - 15)
    .attr("y", height - 60)
    .attr("text-anchor", "end")
    .attr("font-size", "10px")
    .style("opacity", 0.5)
    .text("bilateral migration")

var bigGraph = {"nodes":[], "links":[]};

function compare(a,b) {
  if (a.i < b.i)
    return -1;
  if (a.i > b.i)
    return 1;
  return 0;
}

var selectyeartext = ["2000","1990","1980","1970","1960"];
var selectyearids = [2000,1990,1980,1970,1960];
var selectyear = 2000;


d3.csv("migration.csv", function(error, migrationTable) {
  
  d3.json("countrynames.json", function(error, countrynames) {
  
    
    // construct graph object from table
    
    var nodes = {};
    var nCount = 0;
    var lCount = 0;
    migrationTable.forEach(function(m){
      if (!(m.cCode1 in nodes)) { nodes[m.cCode1] = nCount; nCount += 1; };
      if (!(m.cCode2 in nodes)) { nodes[m.cCode2] = nCount; nCount += 1; };
      bigGraph.links.push({"source": nodes[m.cCode1] , 
                        "target": nodes[m.cCode2] ,
                        "1960": m.totalMigration1960 ,
                        "1970": m.totalMigration1970 ,
                        "1980": m.totalMigration1980 ,
                        "1990": m.totalMigration1990 ,
                        "2000": m.totalMigration2000 ,
                        "linkname" : lCount
                       });
      lCount += 1;
    });
    
    bigGraph.nodes = $.map(nodes, function(v, k) {
      return {"x": width * Math.random(), "y": height * Math.random(), "i": v, "name": k, "countryname": countrynames[k]};
    });
    bigGraph.nodes.sort(compare);
  
  
    // text fields used as selectors
  
    for (var i=0; i<selectyearids.length; i++) {
      svg.append("text").attr("x", width - 215 + (selectyearids.length - i - 1) * 50).attr("y", height - 10)
          .attr("class", "text-button1")
          .attr("id", selectyearids[i]).style("opacity", i == 0 ? 1 : 0.5 )
          .attr("iv", i)
          .attr("text-anchor", "end")
          .attr("font-size", "10px")
          .text(selectyeartext[i])
          .on('mouseover', function(e){
                  
                  // determine which text-'button' is selected
                  var selectedNum = parseInt(d3.select(this)[0][0].attributes.iv.value);
  
                  // change opacities of text-'buttons'
                  d3.selectAll(".text-button1").style("opacity",0.5);
                  d3.select(this).style("opacity",1);
                  
                  selectyear = selectyearids[selectedNum];
                  
                  redraw(bigGraph, selectcutoff, selectyear);
  
            });
    }
  
 
    brush.on("brush", brushed);

    slider
      .call(brush.extent([2000000, 2000000]))
      .call(brush.event);

    
    redraw(bigGraph,selectcutoff,selectyear);
  
  });
  
});


function brushed() {
  var value = brush.extent()[0];

  if (d3.event.sourceEvent) { // not a programmatic event
    value = x.invert(d3.mouse(this)[1]);
    brush.extent([value, value]);
  }

  handle.attr("cy", x(value));
  
  selectcutoff = value;
  
  redraw(bigGraph,selectcutoff,selectyear);

}



function redraw(bigGraph, cutoff, year) {

  var currentNodes = force.nodes();
  
  var graph = {"nodes":[], "links":[]};
  var nodeList = {};
  var nlCount = 0;
  graph.links = $.map(bigGraph.links, function(v) {
    if (v[''+year] > cutoff) {
      if (!(v.source in nodeList)) { nodeList[v.source] = nlCount; nlCount += 1; };
      if (!(v.target in nodeList)) { nodeList[v.target] = nlCount; nlCount += 1; };
      return {"source": nodeList[v.source], "target": nodeList[v.target], "distance": v[''+year], "linkname": v.linkname};
    }
  }); 
  graph.nodes = $.map(bigGraph.nodes, function(v) {
    if (v.i in nodeList) {
      var current = -1;
      currentNodes.forEach(function(n,i){
        if (n.name == v.name) { current = i; }
      });
      if (current > -1) {
        return {"x": currentNodes[current].x, "y": currentNodes[current].y, "i": nodeList[v.i], "name": v.name, "countryname": v.countryname};
      } else {
        return {"x": v.x, "y": v.y, "i": nodeList[v.i], "name": v.name, "countryname": v.countryname};
      }
    }
  });
  graph.nodes.sort(compare);

  force
      .nodes(graph.nodes)
      .links(graph.links);
  

  var link = svg.selectAll(".linkg").selectAll(".link").data(graph.links,function(v){ return v.linkname; });

  link.enter()
    .append("line")
      .attr("class", "link")
      .style("opacity",1e-6)
      .transition()
        .duration(1500)
        .style("opacity",1);
  
  link.exit()
    .transition()
      .duration(500)
      .style("opacity",1e-6)
      .remove();

  var node = svg.selectAll(".nodeg").selectAll(".node").data(graph.nodes,function(v){ return v.name; });
  
  node.exit()
    .transition()
      .duration(500)
      .style("opacity",1e-6)
      .remove();

  var node2 = node.enter()
    .append("g")
      .attr("class", "node");

  node2.append("ellipse")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("rx", 16)
      .attr("ry", 8)
      .attr("title", function(d) { return d.countryname })
      .style("opacity",1e-6)
      .transition()
        .duration(1500)
        .style("opacity",1);

  node2.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", ".35em")
      .text(function(d) { return d.name })
      .style("opacity",1e-6)
      .transition()
        .duration(1500)
        .style("opacity",1);

  force
      .linkDistance(function(l) { return 20 + 5 * Math.log(1.0 + 1000000000 / l.distance); })
      .start();

  force.on("tick", function() {
    
    link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
      
    node
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  });

}

</script>

</body>
</html>

migration.csv

thumbnail.png