This is a data visualization of the refugees around the world from 2000-2013, based on UNHRC data.
xxxxxxxxxx
<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