UNHCR Persons of Concern Top 50 Places of Origin

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.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>unhcr column chart</title>
            <script src="https://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 + ")");

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js