Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/UNhcrPOC50.js

Last active August 29, 2015 13:56
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 mpmckenna8/9079827 to your computer and use it in GitHub Desktop.
Save mpmckenna8/9079827 to your computer and use it in GitHub Desktop.
Download ZIP
UNHCR Persons of Concern Top 50 Places of Origin
Raw
readme.md

Trying to make something out of some UN HCR data downloaded from their data portal then aggregated a little bit in MongoDB then using d3.js to try to visualize a little. Next step is figuring out what kind of text stuff i want to add like letting people know what each bar represents w/out them having to look in the array. Plus I should try making something with just the big .csv the UNHCR lets you download because it really wasn't necessary to construct this array. Just practicing my Mongo Aggregation skills...

UNhcrPOC50.js contains an array called "top50POCunhcr" which contains 50 objects representing the top origins of refugees. What really caught my eye was the fourth value which is "Stateless" represented by the fourth column in the chart and how quickly the values drop off.

Lots of Stateless people out there need help I guess was my little takeaway.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>unhcr column chart</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="./UNhcrPOC50.js"></script>
<style>
.bar {
fill: purple;
}
.bar:hover {
fill: brown;
}
.axis {
font: 9px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
stroke:black;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: #F6F9ED;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
margin-left:250px;
margin-top:50px;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
svg{
margin-top:50px;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong>Origin</strong></p>
<p id="value"> </p>
</div>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 85};
var w = 1100- margin.left - margin.right,
barheight= 20;
var h= 500 - margin.top - margin.bottom;
barPadding = 3;
// var x = d3.scale.linear()
// .range([0,width]);
/*
var chart = d3.select(".chart").attr("width",width).attr("height",h);
// x.domain([0,d3.max(tops.totrefs)])
*/
var x = d3.scale.ordinal()
.range([0, w+20])
.domain(50);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
;
//var refs = d3.values(top50POCunhcr);
//console.table(refs);
//console.log(refs[1]);
var y = d3.scale.linear()
.domain([0,4500000])
.range([ h,0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var axisp= h;
svg.selectAll("rect")
.data(top50POCunhcr)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / top50POCunhcr.length) + 15;
})
.attr("y", function(d) {
return h - (d.totrefs / 10000);
})
.attr("width", w / top50POCunhcr.length - barPadding)
.attr("height", function(d) {
return d.totrefs / 10000;
})
.attr("fill","red")
.attr("class", function(d){
if(d._id == "Stateless" ){
return "noState"
}
else{
return "bar"}})
.on("mouseover", function(d){
var xposit = 100;
//parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2;
var yposit = 80;
d3.select("#tooltip")
.style("left", xposit+ "px")
.style("top", yposit + "px")
.select("#value")
.text(d._id);
//show the tooltip
d3.select("#tooltip").classed("hidden",false);
})
.on("mouseout",function(){
//take away the tooltip
d3.select("#tooltip").classed("hidden",true);
});
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.attr("transform", "translate(0," + axisp + ")")
.append("text")
.style("text-anchor","middle")
.text("Places of Origin")
.attr("y", 12)
.attr("x",axisp)
;
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Number of People of Concern");
//now for that y axis which needs a linear scale...
</script>
</body>
</html>
Raw
UNhcrPOC50.js
top50POCunhcr = [
{
"_id" : "Colombia",
"totrefs" : 4356236
},
{
"_id" : "Afghanistan",
"totrefs" : 4023752
},
{
"_id" : "Democratic Republic of the Congo",
"totrefs" : 3568381
},
{
"_id" : "Stateless",
"totrefs" : 3358415
},
{
"_id" : "Syrian Arab Republic",
"totrefs" : 2835026
},
{
"_id" : "Sudan",
"totrefs" : 2557771
},
{
"_id" : "Somalia",
"totrefs" : 2313460
},
{
"_id" : "Iraq",
"totrefs" : 2120666
},
{
"_id" : "Pakistan",
"totrefs" : 970943
},
{
"_id" : "Myanmar",
"totrefs" : 871354
},
{
"_id" : "Azerbaijan",
"totrefs" : 617969
},
{
"_id" : "Yemen",
"totrefs" : 497000
},
{
"_id" : "South Sudan",
"totrefs" : 451345
},
{
"_id" : "Kenya",
"totrefs" : 422424
},
{
"_id" : "Philippines",
"totrefs" : 418689
},
{
"_id" : "Serbia (and Kosovo: S/RES/1244 (1999))",
"totrefs" : 405261
},
{
"_id" : "Mali",
"totrefs" : 379834
},
{
"_id" : "Various",
"totrefs" : 361377
},
{
"_id" : "Viet Nam",
"totrefs" : 338344
},
{
"_id" : "Burundi",
"totrefs" : 328052
},
{
"_id" : "Eritrea",
"totrefs" : 305850
},
{
"_id" : "Georgia",
"totrefs" : 293530
},
{
"_id" : "Sri Lanka",
"totrefs" : 284776
},
{
"_id" : "Côte d'Ivoire",
"totrefs" : 270725
},
{
"_id" : "Central African Republic",
"totrefs" : 254307
},
{
"_id" : "Libya",
"totrefs" : 244545
},
{
"_id" : "Bosnia and Herzegovina",
"totrefs" : 222349
},
{
"_id" : "Turkey",
"totrefs" : 212925
},
{
"_id" : "China",
"totrefs" : 208730
},
{
"_id" : "Chad",
"totrefs" : 188010
},
{
"_id" : "Kyrgyzstan",
"totrefs" : 176549
},
{
"_id" : "Russian Federation",
"totrefs" : 136193
},
{
"_id" : "Zimbabwe",
"totrefs" : 121710
},
{
"_id" : "Iran (Islamic Republic of)",
"totrefs" : 121566
},
{
"_id" : "Ethiopia",
"totrefs" : 121462
},
{
"_id" : "Angola",
"totrefs" : 116751
},
{
"_id" : "Western Sahara",
"totrefs" : 116559
},
{
"_id" : "Rwanda",
"totrefs" : 107694
},
{
"_id" : "Liberia",
"totrefs" : 97307
},
{
"_id" : "Palestinian",
"totrefs" : 97258
},
{
"_id" : "Croatia",
"totrefs" : 84570
},
{
"_id" : "Congo",
"totrefs" : 61434
},
{
"_id" : "Haiti",
"totrefs" : 46745
},
{
"_id" : "Bhutan",
"totrefs" : 41673
},
{
"_id" : "United Republic of Tanzania",
"totrefs" : 37128
},
{
"_id" : "Mauritania",
"totrefs" : 36757
},
{
"_id" : "Uganda",
"totrefs" : 34439
},
{
"_id" : "Ghana",
"totrefs" : 32578
},
{
"_id" : "Nigeria",
"totrefs" : 32181
},
{
"_id" : "Guinea",
"totrefs" : 29040
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment