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