Skip to content

Instantly share code, notes, and snippets.

@jeremycflin

jeremycflin/README.md

Last active October 12, 2015 04:48
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 jeremycflin/c976ac4296274cc6f6cc to your computer and use it in GitHub Desktop.
Save jeremycflin/c976ac4296274cc6f6cc to your computer and use it in GitHub Desktop.
Download ZIP
Worldwide Stateless Populaiton
Raw
README.md

Nowhere Land: Worldwide Stateless Population by Country

Living at the margins of society, the worldwide population of stateless people is estimated to be around 10 million according to the United Nations High Commission on Refugees. The data includes estimated statistics on the Dominican Republic, India and Indonesia. In recent years the number of stateless people has decreased in countries such as Iraq and the Russian Federation.

Built with blockbuilder.org

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#dataViz{
max-width: 1200px;
margin: 30px auto 20px auto;
}
/* body{
background-color: #f9f9f9;
}*/
/* Tooltip CSS */
.d3-tip {
line-height: 1.5;
font-weight: 400;
font-family:"avenir next", Arial, sans-serif;
padding: 6px;
background: rgba(0, 0, 0, 0.6);
color: #FFA500;
border-radius: 1px;
pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 8px;
width: 100%;
line-height: 1.5;
color: rgba(0, 0, 0, 0.6);
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
/* text{
pointer-events:none;
}*/
/* .circle:hover{
stroke: rgb(0, 0, 0);
stroke-width: 1px;
}
*/
.details{
color: white;
/*font-weight: 600;*/
}
.legendCircle{
fill:rgba(255,255,255,0.6);
stroke:black;
stroke-width:1.5;
stroke-dasharray:5,5;
}
.legendText{
font-family:"avenir next", Arial, sans-serif;
font-size: 12px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,600,700,400italic,600italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="dataViz"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
<script>
// Set tooltips
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
// return d.name + " has <br>" + d.value + " stateless people";
return "<strong>Country: </strong><span class='details'>" + d.name + "<br></span>" + "<strong>Stateless: </strong><span class='details'>" + d.value +"</span>";
})
// Set margin, with and height
var margin = {top: 20, right: 20, bottom: 30, left: 30},
width = 1200 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
// Set projection
var projection = d3.geo.mercator()
.scale(200)
.translate( [width / 2, height / 1.5]);
// Set path
var path = d3.geo.path().projection(projection);
// Setsvg and then give it a class called map
var svg = d3.select("#dataViz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
.attr('class', 'map');
// Call tooltips
svg.call(tip);
d3.json("world_countries.json", function(data){
// Binding geodata
var map = svg.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d', path)
.style('fill', '#c9cbcd')
.style('opacity','0.7')
.style('stroke', 'white')
.style('stroke-width', 1.5);
// Bubbles data
var population = [
{
"name" : "Myanmar",
"location" : [16.799999,96.150002],
"value":"810000"
},
{
"name" : "Ivory Coast",
"location" : [6.8500,-5.3000],
"value":"700000"
},
{
"name" : "Thailand",
"location" : [13.7500,100.4833],
"value":"506197"
},
{
"name" : "Latvia",
"location" : [57.0000,25.0000],
"value":"267559"
},
{
"name":"Dominican Republic",
"location":[19.0000,-70.6667],
"value":"210000"
},
{
"name":"Russian Federation",
"location":[60.0000,90.0000],
"value":"178000"
},
{
"name":"Syrian Arab Republic",
"location":[33.5000,36.3000],
"value":"160000"
},
{
"name":"Iraq",
"location":[33.3333,44.4333],
"value":"120000"
},
{
"name":"Kuwait",
"location":[29.3667,47.9667],
"value":"93000"
},
{
"name":"Estonia",
"location":[59.0000,26.0000],
"value":"91281"
},
{
"name":"Saudi Arabia",
"location":[24.0000,45.0000],
"value":"70000"
},
{
"name":"Malaysia",
"location":[3.1333,101.7000],
"value":"40000"
},
{
"name":"Ukraine",
"location":[49.0000,32.0000],
"value":"33271"
},
{
"name":"Brunei Darussalam",
"location":[4.8903,114.9422],
"value":"20524"
},
{
"name":"Sweden",
"location":[59.3500,18.0667],
"value":"20450"
},
{
"name":"Kenya",
"location":[-1.2667,36.8000],
"value":"20000"
},
{
"name":"Germany",
"location":[52.5167,13.3833],
"value":"11709"
},
{
"name":"Kyrgyzstan",
"location":[42.8667,74.6000],
"value":"11425"
},
{
"name":"Vietnam",
"location":[21.0333,105.8500],
"value":"11000"
},
{
"name":"Poland",
"location":[52.2167,21.0333],
"value":"10825"
},
{
"name":"Turkmenistan",
"location":[37.9667,58.3333],
"value":"8320"
},
{
"name":"Albania",
"location":[41.0000,20.0000],
"value":"7443"
},
{
"name":"Kazakhstan",
"location":[48.0000,68.0000],
"value":"6942"
},
{
"name":"Belarus",
"location":[53.9167,27.5500],
"value":"6712"
},
{
"name":"Philippines",
"location":[13.0000,122.0000],
"value":"6015"
},
{
"name":"Denmark",
"location":[55.7200,12.5700],
"value":"4263"
},
{
"name":"Serbia",
"location":[44.8000,20.4667],
"value":"4195"
},
{
"name":"Lithuania",
"location":[55.0000,24.0000],
"value":"3892"
},
{
"name":"Azerbaijan",
"location":[40.3000,47.7000],
"value":"3585"
},
{
"name":"Montenegro",
"location":[42.7833,19.4667],
"value":"3341"
},
{
"name":"Croatia",
"location":[45.8000,16.0000],
"value":"2886"
},
{
"name":"Belgium",
"location":[50.8500,4.3500],
"value":"2466"
},
{
"name":"Finland",
"location":[64.0000,26.0000],
"value":"2122"
},
{
"name":"Norway",
"location":[61.0000,8.0000],
"value":"1975"
},
{
"name":"Netherlands",
"location":[52.3167,5.5500],
"value":"1951"
},
{
"name":"Slovakia",
"location":[48.1500,17.1167],
"value":"1523"
},
{
"name":"Czech Republic",
"location":[49.7500,15.7500],
"value":"1502"
},
{
"name":"Tajikistan",
"location":[38.5500,68.8000],
"value":"1364"
},
{
"name":"Burundi",
"location":[-3.5000,30.0000],
"value":"1302"
},
{
"name":"France",
"location":[47.0000,2.0000],
"value":"1247"
},
{
"name":"Qatar",
"location":[25.3000,51.5167],
"value":"1200"
},
{
"name":"Japan",
"location":[35.6833,139.7667],
"value":"852"
},
{
"name":"The former Yugoslav Republic of Macedonia",
"location":[41.6000,21.7000],
"value":"819"
},
{
"name":"Bosnia and Herzegovina",
"location":[44.0000,18.0000],
"value":"792"
},
{
"name":"Turkey",
"location":[39.9167,32.8333],
"value":"780"
},
{
"name":"Georgia",
"location":[41.7167,44.7833],
"value":"776"
},
{
"name":"Austria",
"location":[48.2000,16.3500],
"value":"604"
},
{
"name":"Portugal",
"location":[38.7000,-9.1833],
"value":"553"
},
{
"name":"Italy",
"location":[41.9000,12.4833],
"value":"470"
},
{
"name":"Romania",
"location":[44.4167,26.1000],
"value":"297"
},
{
"name":"Spain",
"location":[40.4333,-3.7000],
"value":"270"
},
{
"name":"United Kingdom",
"location":[51.5000,-0.1167],
"value":"205"
},
{
"name":"Rep. of Korea",
"location":[37.5500,126.9667],
"value":"194"
},
{
"name":"Armenia",
"location":[40.1833,44.5167],
"value":"180"
},
{
"name":"Greece",
"location":[39.0000,22.0000],
"value":"178"
},
{
"name":"Luxembourg",
"location":[49.6000,6.1167],
"value":"177"
},
{
"name":"Iceland",
"location":[65.0000,-18.0000],
"value":"119"
},
{
"name":"Hungary",
"location":[47.4333,19.2500],
"value":"113"
},
{
"name":"Switzerland",
"location":[46.8333,8.3333],
"value":"79"
},
{
"name":"Ireland",
"location":[53.3442,-6.2675],
"value":"73"
},
{
"name":"Egypt",
"location":[26.0000,30.0000],
"value":"23"
},
{
"name":"Mongolia",
"location":[46.0000,105.0000],
"value":"16"
},
{
"name":"Israel",
"location":[31.0000,35.0000],
"value":"14"
},
{
"name":"Mexico",
"location":[19.0000,-99.1333],
"value":"13"
},
{
"name":"Colombia",
"location":[4.5833,-74.0667],
"value":"12"
},
{
"name":"Slovenia",
"location":[46.0500,14.5000],
"value":"4"
},
{
"name":"Brazil",
"location":[-15.7833,-47.8667],
"value":"2"
},
{
"name":"Liechtenstein",
"location":[47.1417,9.5233],
"value":"2"
},
{
"name":"Panama",
"location":[8.9667,-79.5333],
"value":"2"
},
{
"name":"Aruba",
"location":[12.5000,-69.9667],
"value":"1"
},
{
"name":"Honduras",
"location":[14.1000,-87.2167],
"value":"1"
},
{
"name":"Hong Kong",
"location":[22.2783,114.1747],
"value":"1"
},
{
"name":"Liberia",
"location":[6.3167,-10.8000],
"value":"1"
},
{
"name":"Nicaragua",
"location":[13.0000,-85.0000],
"value":"1"
}
];
// Draw bubbles
svg.selectAll("circle")
.data(population)
.enter()
.append("circle")
.attr("cx", function(d){ return projection([d.location[1], d.location[0]])[0]; } ) //projection([long, lat])[1]
.attr("cy", function(d){ return projection([d.location[1], d.location[0]])[1]; })
// .attr("r", function(d){ return d.value/18000;})
.attr("r",5)
.attr("fill", "#C74848")
.style("opacity",0.6)
.style("stroke","white")
.style('stroke-width', 0.5)
.on('mouseover',function(d){
tip.show(d);
d3.select(this)
.style("opacity", 0.9)
.style("stroke","black")
.style("stroke-width",1.5);
})
.on('mouseout', function(d){
tip.hide(d);
d3.select(this)
.style("opacity", 0.6)
.style("stroke","white")
.style("stroke-width",0.5);
})
.transition()
.duration(2500)
.delay(function(d, i){
return i * 20;
})
.attr("r",function(d){
if( +d.value > 700000){ return 45 }
else if( +d.value > 500000){return 40}
else if( +d.value > 100000){ return 35}
else if (+d.value > 50000){return 30}
else if (+d.value > 10000){return 25}
else if (+d.value > 5000){return 20}
else if (+d.value > 1000){return 15}
else if (+d.value > 500){return 10}
else{ return 5 };
})
});
// Add legend bubble
d3.select("svg")
.append("circle")
.attr("cx",width/12)
.attr("cy",(height - height/3))
.attr("r",40)
.attr('class', 'legendCircle');
d3.select("svg")
.append("circle")
.attr("cx",width/12)
.attr("cy",(height - height/4.3))
.attr("r",30)
.attr('class', 'legendCircle');
d3.select("svg")
.append("circle")
.attr("cx",width/12)
.attr("cy",(height - height/6.3))
.attr("r",20)
.attr('class', 'legendCircle');
d3.select("svg")
.append("circle")
.attr("cx",width/12)
.attr("cy",(height - height/8.9))
.attr("r",10)
.attr('class', 'legendCircle');
d3.select("svg")
.append("text")
.attr("x",width/28)
.attr("y",(height - height/20))
.text("Data source: UNHCR 2013")
.style("font-family","avenir next")
.style("font-size","11")
.style("font-weight","400");
d3.select("svg")
.append("text")
.attr("x",width/28)
.attr("y",(height - height/33))
.text("Data is not complete and includes estimates.")
.style("font-family","avenir next")
.style("font-size","11")
.style("font-weight","400");
d3.select("svg")
.append("text")
.attr("x",width/28)
.attr("y",(height - height/2.5))
.text("Stateless Population")
.style("font-family","avenir next")
.style("font-size","15")
.style("font-weight","600");
d3.select("svg")
.append("text")
.attr("x",width/8)
.attr("y",(height - height/3.1))
.text("More than 500000")
.attr("class","legendText");
d3.select("svg")
.append("text")
.attr("x",width/8)
.attr("y",(height - height/4.5))
.text("50000")
.attr("class","legendText");
d3.select("svg")
.append("text")
.attr("x",width/8)
.attr("y",(height - height/6.5))
.text("5000")
.attr("class","legendText");
d3.select("svg")
.append("text")
.attr("x",width/8)
.attr("y",(height - height/9.5))
.text("Less than 500")
.attr("class","legendText");
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
world_countries.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment