mpmckenna8/UNhcrPOC50.js

## readme.md

      
    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.

  
## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## 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
		}
	]
	<!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>
	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
	}
	]