Refugees 2000-2013

This is a data visualization of the refugees around the world from 2000-2013, based on UNHRC data.

<!doctype html>
<html>
<head>
        <title>Refugees to the U.S. in 2013</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<style>
path.countries {
     stroke-width: 0.3;
     stroke: #75739F;
     /*fill: #5EAFC6;*/
}
circle.cities {
     stroke-width: 1;
     /*stroke: #4F442B;*/
     opacity: 0.5;
     fill: #3182bd;
}
circle.centroid {
     fill: #75739F;
     pointer-events: none;
}

.arc {
       stroke: #75739F;
       stroke-width: 1;
       fill: none;
}

rect.bbox {
     fill: none;
     stroke-dasharray: 5 5;
     stroke: #75739F;
     stroke-width: 2;
     pointer-events: none;
}
path.graticule {
     fill: none;
     stroke-width: 1;
     stroke: #9A8B7A;
}
path.graticule.outline {
     stroke: #9A8B7A;
}

path.merged {
  fill: #9A8B7A;
  stroke: #4F442B;
  stroke-width: 2px;
}
</style>
</head>
<body>
    <h1>Refugees to the United States</h1>

<div id="controls">
</div>
<div id="viz">
<svg style="width:1200px;height:1500px;" />
</div>
  <script type="text/javascript">
  
  
var colors = {
  Reds: {
      3: ["#fee0d2","#fc9272","#de2d26"],
      4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"],
      5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],
      6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],
      7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
      8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
      9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]
  }
};
var PromiseWrapper = (xhr, d) => new Promise(resolve => xhr(d, (p) => resolve(p)))

Promise.all(
    [PromiseWrapper(d3.json, "world.geojson"),
     PromiseWrapper(d3.csv, "cities.csv"),
     PromiseWrapper(d3.csv, "refugees.csv"),
     PromiseWrapper(d3.csv, "lookup.csv")])
    .then(resolve => {
        createMap(resolve[0], resolve[1], resolve[2], resolve[3])
        })

function createMap(countries, cities, refugees, lookup) {
    var projection = d3.geoRobinson()
        .scale(150)
        .rotate([352, 0, 0])
        .translate([500, 300]);
    var geoPath = d3.geoPath().projection(projection);
    var featureSize = d3.extent(countries.features, d => geoPath.area(d))
    var countryColor = d3.scaleLog()
        .domain(featureSize).range(colors.Reds[7]);

var refugeeCountExtent = d3.extent(refugees, d => d.value);
    var thresholds = [10, 100, 1000, 5000, 10000, 50000, 100000]
    var refugeeFillColor = d3.scaleThreshold()
        .domain(thresholds)
        .range(colors.Reds[6]);

var locHash = {};
    refugees.forEach((node, x) => {
        locHash[node.country_of_origin] = node
        nodeOriginXY = projection([node.longitude, node.latitude])
        node.originX = nodeOriginXY[0]
        node.originY = nodeOriginXY[1]
        
        nodeToXY = projection([node.longitude_to, node.latitude_to])
        node.destX = nodeToXY[0]
        node.destY = nodeToXY[1]
    })

d3.select("svg").selectAll("path").data(countries.features)
         .enter()
         .append("path")
         .attr("d", geoPath)
         .attr("class", "countries")
         .style("fill", d => refugeeFillColor(locHash[d.id] ? locHash[d.id].value : 0))
         .style("stroke", d => d3.rgb(countryColor(geoPath.area(d))).darker())
    var year = 2013;
    var residence = 'USA';

function filterRefugees(data, year, residence) {
        // console.log(data)
        // console.log(data.filter(d => d.year === year && d.country_of_residence === residence));
        return data.filter(d => d.year == year && d.country_of_residence === residence);
    }
     
    var arcG = d3.select("svg").append("g").attr("id", "arcG")
    nodeSizeLogScale = d3.scaleLog()
        .base(Math.E)
        .domain([Math.exp(0), 100000])
        .range([0, 15])

var filteredRefugeeData = filterRefugees(refugees, 2000, 'USA');
    console.log("filteredRefugeeData, ", filteredRefugeeData);

var circleG = d3.select("svg").append("g").attr("id", "circleG")
    
    circleG.selectAll("circle")
        .data(filteredRefugeeData)
        .enter()
        .append("circle")
        .attr("class", "cities")
        .attr("r", d => nodeSizeLogScale(d.value))
        .attr("cx", d => projection([d.longitude,d.latitude])[0])
        .attr("cy", d => projection([d.longitude,d.latitude])[1]);
    
    arcG.selectAll("path")
        .data(filteredRefugeeData)
        .enter()
        .append("path")
        .attr("class", "arc")
        .attr("d", arc)
};

function arc(d,i) {
  var draw = d3.line().curve(d3.curveBasis);
 
  var midX = (d.originX + d.destX) / 2;
  var midY = d.destY - Math.max(100, Math.abs(d.destY - d.originY));
  return draw([[d.originX,d.originY], [midX, midY], [d.destX,d.destY]])
}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/d3-geo-projection.v1.min.js