Module 5 exercise - Global refugee data

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Global Refugee Data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				background-color: white;
				font-family: Book Antiqua;
				font-weight: bold;
				margin-left: 50px;
			}
			h1 {
				font-family: Book Antiqua;
				font-size: 24px;
				margin: 0;
				color: #323232;
			}

p {
				font-family: Book Antiqua;
				font-size: 14px;
				color: #323232;
				margin: 10px 0 0 0;
			}
			svg {
				background-color: #323232;
			}
			circle:hover {
				fill: #ff9900;
			}
			.axis path, .axis line {
				fill: none;
				stroke: white;
				shape-rendering: crispEdges;
			}

.axis text {
				font-family: Book Antiqua;
				fill: white;
				font-size: 10px;
			}

.y.axis path, .y.axis line {
				fill: none;
				stroke: white;
				shape-rendering: crispEdges;
			}

.countryName {
				font-weight: bold;
				font-size: 14px;
				color: white;
			}
			.dataVal {
				font-weight: bold;
				color: white;
			}
			.toolTip {
				padding: 6px;
				background-color: #323232;
				border-radius: 4px;
				position: absolute;
				font-size: 12px;
				color: #ff9900;
				line-height: 18px;
				visibility: hidden;
			}
			.subhead {
				fill: white;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div class="toolTip"></div>
		<h1>Global Refugee Data</h1>

<p>
			Average annual refugees (2009-2013) and GDP at PPP 2013 for selected countries. Source: <a href="https://popstats.unhcr.org/#_ga=1.152203577.1033056182.1429126874">UNHCR</a> and <a href="https://data.worldbank.org/indicator/NY.GDP.PCAP.PP.CD">World Bank</a>
		</p>
		<br/>
		<script type="text/javascript">
			var w = 900;
			var h = 750;
			var tt;
			var padding = [50, 10, 75, 100];
			//Top, right, bottom, left

var xScale = d3.scale.linear().range([padding[3], w - padding[1] - padding[3]]);

var yScale = d3.scale.linear().range([padding[0], h - padding[2]]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10);

var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(15);

var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
			svg.append('text').text('GDP per capita at PPP 2013 in USD').attr('transform', function(d) {
				return "rotate(-90 0, 360)"
			}).attr('x', 0).attr('y', h / 2 + 15).attr('text-anchor', 'middle').attr('class', 'y subhead').attr('opacity', 1)

svg.append('text').text('Average annual refugees 2009-2013').attr('x', w / 2).attr('y', h - 15).attr('text-anchor', 'middle').attr('class', 'x subhead').attr('opacity', 1)

d3.csv("RefugeeData.csv", function(data) {

xScale.domain([d3.min(data, function(d) {
					if (d.ref_p_gdp > 10) {
						return +d.avg_refugees;
					}
				}), d3.max(data, function(d) {
					if (d.ref_p_gdp > 10) {
						return +d.avg_refugees;
					}
				})]);

yScale.domain([d3.max(data, function(d) {
					if (d.ref_p_gdp > 10) {
						return +d.gdp_ppp_13;
					}
				}), d3.min(data, function(d) {
					if (d.ref_p_gdp > 10) {
						return +d.gdp_ppp_13;
					}
				})]);

circlesData.sort(function(a, b) {
					return d3.descending(+a.ref_p_gdp, +b.ref_p_gdp);
				}).transition().delay(function(d, i) {
					if (d.ref_p_gdp > 10) {
						return i * 25;
					}
				}).duration(1000).attr("cx", function(d) {
					if (d.ref_p_gdp > 10) {
						return xScale(d.avg_refugees);
					}
				}).attr("cy", function(d) {
					if (d.ref_p_gdp > 10) {
						return yScale(d.gdp_ppp_13);
					}
				}).attr("r", function(d) {
					if (d.ref_p_gdp > 10) {
						return 5;
					}
				}).attr("fill", "#ffc04c");

svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + (h - padding[2] + 10) + ")").call(xAxis);

svg.append("g").attr("class", "y axis").attr("transform", "translate(" + (padding[3] - 10) + ",0)").call(yAxis);

circlesData.style('cursor', 'pointer')

circlesData.on('mouseover', function(d) {
					d3.select(this).classed('hover', true).transition().attr('r', 10)
					tt = d3.select('.toolTip');

tt.html('<span class="countryName">' + d.country + '</span><br/>' + 'Average annual refugees : <span class="dataVal">' + Math.floor(Math.round(d.avg_refugees)) + '</span><br/>GDP per capita at PPP : <span class="dataVal">USD ' + Math.floor(Math.round(d.gdp_ppp_13)) + '</span>').style('left', d3.event.pageX + 10 + 'px').style('top', d3.event.pageY + 10 + 'px').style('visibility', 'visible')

})
				circlesData.on('mouseout', function() {
					d3.select(this).classed('hover', false).transition().attr('r', 5)
					tt.style('visibility', 'hidden')

})
			});

</script>

</body>
</html>

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

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